CSS Media Queries - More Examples

Media queries are a popular technique for delivering a tailored style sheet to different devices.

EXAMPLE:

/* Set the background color of body to tan */
body {
background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
body {
    background-color: olive;
  }
}

Media Queries For Menus

In this example, we use media queries to create a responsive navigation menu, that varies in design on different screen sizes.

EXAMPLE:

/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
    float: none;
    width: 100%;
  }
}

Media Queries For Columns

A common use of media queries, is to create a flexible layout. In this example, we create a layout that varies between four, two and full-width columns, depending on different screen sizes:

EXAMPLE:

/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
    width: 100%;
  }
}

EXAMPLE:

/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}

/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
    flex-direction: column;
  }
}

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different screen sizes:

EXAMPLE:

/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}

Change Font Size With Media Queries

You can also use media queries to change the font size of an element on different screen sizes:

EXAMPLE:

/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
div.example {
    font-size: 80px;
  }
}

/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
    font-size: 30px;
  }
}

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the orientation of the browser.

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation:

EXAMPLE:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Min Width to Max Width

You can also use the (max-width: ..) and (min-width: ..) values to set a minimum width and a maximum width.

For example, when the browser's width is between 600 and 900px, change the appearance of a <div> element:

EXAMPLE:

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Using an additional value: In the example below, we add an additional media query to our already existing one using a comma (this will behave like an OR operator):

EXAMPLE:

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}