Lesson 14

Media queries

Making your page responsive

Responsive design is the approach many websites use to make their website easily readable on all devices without having to create a separate website. Media queries are the technology behind it all.

We use media queries in CSS to change the properies and values of elements at a particular screen size.

The below example says "when the width of the current browser window does not exceed the max width of 800px, then also apply the below CSS".

@media (max-width:800px) {
    #wrapper{
        width:90%;
    }
}

Play
Go to the next lesson

index.html

style.css

the web page

New Window

Tasks

  • Open the webpage in it's own browser window using the "New Window" button, then resize the window.
  • Change the width of #wrapper in the media query. Make sure you open the preview in a New Window, then resize it to see the result.
Next Lesson
Practical understanding of using background images in page designs, as well as responsive design using Media Queries. Badge

Advanced Design with CSS

Congratulations! You’ve just earned the Advanced Design with CSS badge!

If you'd like to send this badge to your Mozilla backpack, just fill out the form below.

This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.