Media Queries, Responsive Design, Mobile-First

When designing a website, our job is to determine the layout of our rectangles based on the width of the viewport. Media queries influence how the HTML content is styled in print, on-screen, on different devices, and screen sizes. In this chapter, we will only deal with formatting media on-screen, responding to different screen sizes.

Creating breakpoints

Let’s create a container with 100% width for less than 768px viewport width. As soon as the viewport width is 768px or more, add a 10% margin on the left and right-hand side of the container.

If you know how to create breakpoints, solve the following exercise on your own.

To test your solution, try it both in a narrow and in a wide browser window. As soon as the body of the page reaches a width of 768px a 10% left and right margin should be added to the light blue container.