Using Media Queries

Media queries are a built-in feature of CSS that allow the content of a page to adapt to various conditions. Some of the most common conditions are print, small screens, large screens, and high resolution screens. To use a media query, you must designate a media type and at least one other expression that limits the scope of the contained style rules. For example, you could identify screen display as the media type and a maximum width of 1024 pixels for the second constraint. The syntax for this media query would be:

@media screen and (max-width: 1024px) {
.large-screen-rule-1 {
  property: value;
 }

.large-screen-rule-2 {
  property: value;
 }
}

Exiting code block.

All media queries embedded within a style sheet begin with the @media keyword followed by the display type and the secondary constraint. Any CSS rules that will apply when the media query's conditions are met are completely contained within the braces.

The rules in our style sheet at this point are written for display on small screens. Small screen display is generally accomplished with a single column of content. This allows the content to fill the available screen space while still being readable. Larger screens can allow for more spacing around the content as well as multiple columns. We will be using media queries to create layouts with more margin and padding and more columns for larger screens. Since the media queries will be overriding style rules we have already written, we need to add them at the bottom of our style sheet.

Let's create a media query for tablet-sized screens.

Step1. If necessary, activate htmsw.css in the code editor.

Step2. To move to the bottom of the style sheet, scroll down.

NOTE: For all the code in swipe.txt, it will be identified in the step with its location (e.g. [Region 1]).

Step3. To begin a media query, type the code in bold below [Region 1]:

/* Begin Media Queries to fit other screens starting with tablet-ish sized screens */

@media screen { /* For devices larger than 400px */

}

/* Clearing
---------------------------------------------------*/

Exiting code block.

Just identifying screen as the media type won't have any effect; we also need to include a secondary constraint. The secondary constraint will be for the size of the screen. The value can be anything that you desire, but for us today, we will use a minimum width of 400 pixels.

NOTE: Determining sizes for screens can be difficult. For one of the many guides available on the web, see CSS-Trick's page about Media Queries for Standard Devices.

Step4. To finish the media criteria, type the code in bold below [Region 2]:

@media screen and (min-width: 400px) { /* For devices larger than 400px */
   
}

Exiting code block.

That completes our media query.

For tablet sized screens, we will only be changing the display of one of the classes in our site today, but it's the class that handles the width of the site as a whole. We will be narrowing the column a bit and removing some padding.

Step5. To redefine the .container class, type the code in bold below [Region 3]:

@media screen and (min-width: 400px) { /* For devices larger than 400px */
.container {
  width: 80%;
  padding: 0;
 }
}

Exiting code block.

This will change the display of our site to take advantage of the extra space available on a larger screen. To compare, here are the two container classes:

Default Container

.container {
 width: 100%;
 margin: 10px auto 25px;
 padding: 0 20px;
}

Exiting code block.

Tablet Container

.container {
 width: 80%;
 padding: 0;
}

Exiting code block.

6. To see the effects of this, save htmsw.css and refresh index.html in the web browser.

Step7. Slowly make the web browser more narrow and watch for the margins and padding to change to ensure that your media query is working as expected.

This is a simple example of a media query just to introduce the concept. Let's look at a more complex case next. First, we need to understand CSS positioning.