The preview width is fixed to the minimum width. When viewing the preview on smaller devices, the preview will scroll horizontally because the width is fixed. This allows you to preview the width of the Desktop settings even on a mobile device.
Preview columns
You can also set the number of columns displayed in the preview using the Preview columns dropdown. This is to help you see what the grid will look like with different numbers of columns. This is useful on narrower breakpoints where 12 columns with inner gutters doesn't actually fit within the device width. The preview columns are only a visual aid and do not effect the actual number of columns in your grid which is always 12.
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Understanding the responsive grid preview
The responsive grid user interface provides a visual preview of your grid for each device width.
What the preview shows
The outer gutters (highlighted in pink)
The inner gutters (highlighted in blue)
The grid columns (this is the space between the gutters)
The preview width is fixed to the minimum width. When viewing the preview on smaller devices, the preview will scroll horizontally because the width is fixed. This allows you to preview the width of the Desktop settings even on a mobile device.
Preview columns
You can also set the number of columns displayed in the preview using the Preview columns dropdown. This is to help you see what the grid will look like with different numbers of columns. This is useful on narrower breakpoints where 12 columns with inner gutters doesn't actually fit within the device width. The preview columns are only a visual aid and do not effect the actual number of columns in your grid which is always 12.
Site Studio