Acquia Cohesion renames to Site Studio from version 6.2. Tell me more.

    Configuring your responsive grid settings

    Site Studio allows you to configure your website grid and your responsive breakpoint widths.

    Before you start

    Before you set up your responsive grid it is helpful to understand some key concepts:

    Set up your responsive grid

    Step 1 - Choose desktop or mobile first:

    1. Navigate to Site Studio > Website settings > Responsive grid settings
    2. Click on the Desktop or mobile first dropdown and select Desktop first or Mobile first

    Also in settings is the number of columns which in this case is set to 12. You cannot change this setting


    Once you've started building styles and layouts, changing the grid between Desktop and Mobile first will cause unexpected results and should be avoided.

    Step 2 - Enter your settings for each device width:

    1. Minimum width (highlighted in gold) - This sets the minimum width that any settings or styles for that breakpoint will apply
    2. Inner gutters (highlighted in blue) - This sets the gap between columns in your layout
    3. Outer gutters (highlighted in pink) - This sets a gutter to the outside of your layout so that the browser edges never touch the edge of your layout
    4. Boxed width (highlighted in green) - Once you've set your outer gutters you will see that the value in the Boxed width field is equal to your minimum width minus your outer gutters. You cannot edit this value directly. To change it you must change the minimum width or the outer gutter width
    5. Type - This refers to the way in which the grid changes from one breakpoint to the next. Set it to Fixed and the grid will snap from one breakpoint to the next. Set it to Fluid and it will scale gradually from one breakpoint to the next
    6. Click Save


    Set up your responsive grid on an existing website

    If you're using Site Studio on an existing website, you will already have configured your responsive breakpoints within Drupal's YAML file and your website grid within your theme. Site Studio does not work with or alter these settings.

    Pages, styles and templates using Site Studio will use Site Studio's responsive grid settings and breakpoint widths. If you want to match these to the rest of your website you can replicate the widths you've set within your YAML file and your theme within Site Studio's responsive grid settings.

    DX8 knowledge base icon

    Frequently asked questions

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

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket


    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.