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 minimum width (highlighted in gold)
    • The boxed width (highlighted in green) What is boxed width?

    Responsive-grid-preview.png

    Preview width

    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.

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket