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
   

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