Breakpoints

What are breakpoints?

Breakpoints are the points in your design where the layout changes. They are used to create responsive designs, where the layout adapts to different screen sizes.

How to use breakpoints?

You can use media queries to define contextual rules for different screen sizes. Here is an example of a media query that changes the background color to pink when the screen width is smaller than 1500px and to orange when it is smaller than 900px:

/* Syntax to use media queries */
div {
  background-color: lightgreen;
  width: 100%;
  height: 100px;
}

@media screen and (max-width: 1500px) {
  div {background-color: deeppink;}
}

@media screen and (max-width: 900px) {
  div {background-color: orange;}
}

@media screen and (max-width: 1500px) {
  div {background-color: deeppink;}
}

@media screen and (max-width: 900px) {
  div {background-color: orange;}
}

div {
  background-color: lightgreen;
  width: 100%;
  height: 100px;
}

Common breakpoints

Most websites have 3 to 4 breakpoints. One for mobile, one for tablets and one for desktops. Depending on your design, you may need more or less breakpoints. We recommend using these breakpoints:

• Mobile: 480px
• Tablet: 768px
• Desktop: 1024px

Responsive design ≠ Responsive HTML

Note that while you can change the styling of an element responsively, you can't change the content and structure of the HTML document responsively. If you want to show an element only on a specific screen size, you will have to hide it using display: none; or visibility: hidden;.