Version:

    Understanding the responsive breakpoints

    Before you set up your responsive grid you need to understand how the responsive breakpoints work.

    The key points to understand are:

    • There are 6 breakpoint widths
    • Each breakpoint width can have its own settings
    • You can choose Desktop first or Mobile first
      • Desktop first means that properties and settings will inherit from the larger breakpoint
      • Mobile first means that properties and settings will inherit from the smaller breakpoint
      • By default, the grid is set to Desktop first
    • When configuring your breakpoints, you will set the minimum width for each device. The diagram below shows how the minimum width is used
       

    Responsive-breakpoints-diagram.svg

    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

    Acquia

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