---
title: "Understanding the responsive breakpoints"
date: "2017-11-27T16:28:02+00:00"
summary: "Learn how responsive breakpoints work in web design. Understand the 6 breakpoint widths, desktop-first vs. mobile-first approaches, and how to configure minimum widths for optimal responsive layouts."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/understanding-responsive-breakpoints"
id: "f8309650-6f7c-450c-932e-c5eea2302682"
---

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  
     

![c9cd51b7-Responsive-breakpoints-diagram.svg](https://acquia.widen.net/content/a6302228-735e-4396-aacb-30381ad1b21d/web/c9cd51b7-Responsive-breakpoints-diagram.svg)