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
a10%
left and rightmargin
should be added to the light blue container.
Get hands-on with 1200+ tech skills courses.