...

/

Media Queries, Responsive Design, Mobile-First

Media Queries, Responsive Design, Mobile-First

In this lesson, we will look at the anatomy of a media query so we create different designs for different mobile devices.

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.

  • HTML
  • CSS (SCSS)
html
css
Media queries exercise.

CSS inside the media query overrides the CSS outside the media query.

Using min-width and max-width

Technically, it is possible to create both min-width and max-width media query declarations:

We advise using min-width only. However, be ready to ...