Media Queries Basic Examples

Introduction

This page is meant to show you some of the basic ways in which you can use Media Queries. There are a lot of ways to write and use media queries, which is great, but can be confusing. So we won’t cover them all here. If you want a more thorough resource that covers all of the terminology, methods, units etc. then there are other resources. Perhaps start with Mozilla Developer Network's page on media query syntax.

As you’re going through the page I suggest clicking the Edit in CodePen link in the upper right corner of the code examples. This allows you to directly edit the CSS and HTML and see what happens when you do. Each example has an extended example that assumes you’re doing this. It’s also how you can save your work for later.

In order to save your work and keep these examples handy you need to have a CodePen account (see Before You Start for that). Follow this process for each example and you'll have your own versions:

  1. Sign in to Codepen
  2. Click the Edit in CodePen link
  3. Click to fork the project
  4. Click to save (and click save one last time after all your changes).

Before You Start

There are two things that may be helpful to have before you start using this page:

  1. A CodePen account. You can either go to the site http://codepen.io and sign up or you can sign in through your GitHub account. I recommend the GitHub account method and if you’re in the web field and not on GitHub, then sign up to GitHub first: https://github.com.
  2. View this video on media query basics if you don’t know what they are: https://vimeo.com/242735156
    Follow this link to see the presentation used.

    View this video on breakpoints if you don’t know what they are: https://vimeo.com/242735257
    Follow this link to see the presentation used.

Media Query Syntax Basics

Medida queries are a bit different because they are one of the few times where you write a CSS rule inside of other CSS. First you define a media feature. In these examples we will always be looking for some version of the features for the width of the display window.

In the example CSS the feature looked for is whether the browser window is at least 600px. if it is the the styles inside that @media query will apply. You can use the same syntax with max-width and the styles will only apply at that width and smaller.

The basic idea with RWD media queries is to write styles inside of the media query and so you can apply different CSS at different widths.


@media (min-width: 600px){

   /* write your styles here that only
   apply if the query above is true */

}
/* end media query */
                   

If you want to only look for browsers above one number and below another number you can write two features with and in the middle..

In the example CSS the feature looked for is whether the browser window is at least 600px AND at most 900px. If it is the the styles inside that @media query will apply.


@media (min-width: 600px) and (max-width: 900px){

   /* write your styles here that only
   apply if the query above is true */

}
/* end media query */
                   

Example 1: Width-Based Media Queries

As mentioned before there are many types of media queries. They were designed to allow a page’s content to be displayed differently based on characteristics of the browser (or whatever is being used to display the web page). You can make media queries that look for the device orientation, braile, if the screen is color, resolution … .

In responsive web design layout we are really mostly interested in changing the layout based in the width of the screen. So all of these examples will only use width-based media queris. Because we target a range of screen sizes in RWD we will use three range feature targets.

  1. max-width: this targets screens that are at the given size or smaller
  2. min-width: this targets screens that are at the given size or larger
  3. min-width and max-width: when you use them together it targets screens in the range from the min-width to the max-width

Try the examples below. .

max-width media query example

See the Pen Basic Max-Width Media Query by Christopher Stein (@profstein) on CodePen.

1. Extend Max-width

Try extending this example by changing boxes two or three and adding in and changing the media queries.

  • Click Edit in CodePen. Then click Fork and save if you want to keep a copy.
  • Copy the media query from @media to the curly brace } by where the /*end media query */ comment is s written.
  • Paste it in and change he media query to use a different width and change a different box or property.

min-width media query example

See the Pen Basic Min-Width Media Query by Christopher Stein (@profstein) on CodePen.

2. Extend min-width

Try extending this example by changing boxes two or three and adding in and changing the media queries. Same as above but with min-width.

min-width and max-width example

See the Pen Basic Min-Width and max-width Media Query by Christopher Stein (@profstein) on CodePen.

3. Extend min-width and max-width

Try extending this example by writing CSS that only applies in a width range given by min-width and max-width.

Example 2: Media Queries and Layout

After you understand how to write a basic media query it'st time to use them with CSS Grid to change teh layout.

Extend Example 2

Add media queries this example so that:

  1. Two columns of boxes are shown at 600px and higher
  2. Four colums of boxes are shown at 900px and higher.

Example 3: Media Queries and Layout 2

After you understand how to write a basic media query it'st time to use them with CSS Grid to change the layout.

See the Pen Starter Media Queries by Christopher Stein (@profstein) on CodePen.

Extend Example 3

Extend this example so that There are:

  1. The number of colums of boxes changes at different screen widths.
  2. The number of columns of images changes at different screen widths.