Media Queries, Responsive Design, Mobile-First
Explore how media queries help you create responsive web designs that adjust to various device widths, heights, and orientations. Learn the mobile-first approach using min-width breakpoints to build adaptable layouts that improve usability across all screen sizes.
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 ...