Editing Responsive webdesign basics (section)

=== 3. Add breakpoints ===
There is a limit to how flexible your layout can be. For example, a three-column layout will look great on many desktop screens will simply not fit on a phone screen. Therefore you should test what the size limit of your specific design is, and from that limit, the layout should change. This can be done with CSS media queries. 

To illustrate, the CSS below will create a three-column layout by default, but as soon as the user's screen is smaller than 500px, the layout will change to a single column:<syntaxhighlight lang="css" line="1">
article{
  column-count:3;
}

@media (max-width: 500px) {
  article{
    column-count:1;
  }
}
</syntaxhighlight>Many things can be added in this media query. Elements can be hidden on smaller screens, menus switched to dropdown menus, font-sizes can be changed and margins made smaller. You can also add multiple media queries, so that you can optimize for multiple screen sizes. This complicates the CSS quite a but, so usually just two or three media queries should suffice.