MQ Examples

CSS Media Queries Examples

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

To demonstrate a simple example, we can change the background color for different devices:

<img src="mqcap.JPG" style="width:100%;max-width:700px;margin:auto;display:block;">

Example

/* Base style for mobile devices */
body {
  background-color:
  olive;
  color: white;
}

/* For devices with a minimum width
  of 768px (Medium) */
@media screen and (min-width: 768px) {
  body
  {
    background-color: blue;
    color:
  white;
  }
}

/* For devices with a minimum width of 992px
  (Large) */
@media screen and (min-width: 992px) {
  body {

  background-color: tan;
    color: black;
  }
}

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:

Large screens:

Medium screens:

Small screens:

Example

* {
box-sizing: border-box;
}

/* Container for flexboxes */
.container {
  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) {
  .container {

  flex-direction: column;
  }
}

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

To learn more about Responsive Web Design, read our Responsive Web Design Tutorial.

Media Queries For Menus

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

Example

ul {
  list-style-type: none;
  margin: 0;
  padding:
   0;
  background-color: #333333;
  display: flex;
}

   ul li a {
  display: block;
  color: white;

   padding: 14px 16px;
  text-decoration: none;
}

ul li
   a:hover {
  background-color: #111111;
}

/* For viewport
   width 600px or less, make the menu links stack on top of each other */

   @media screen and (max-width: 600px) {
  ul {flex-direction: column;}

   }

Hide Elements With Media Queries

Here, we use media queries to hide an element on small screens:

I will be hidden on small screens.

Example

/* Hide element if the viewport width is 600px or less */
@media
  screen and (max-width: 600px) {
  #div1 {

  display: none;
  }
}

Change Font Size With Media Queries

Here, we use media queries to change the font size of an element on different viewport widths:

Example

/* If viewport width is 600px or more, set font-size to 80px */
@media screen and (min-width:
  600px) {
  #div1 {

  font-size: 80px;
  }
}

Media Queries for Screen Orientation

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

Here, we change the background-color of the body, if the screen orientation is in landscape mode:

Example

@media only screen and (orientation:
landscape) {
  body {

    background-color: lightblue;
  }
}

Media Queries for User Preferences

Some users have motion sensitivity and prefer websites with less animation.

The prefers-reduced-motion media feature lets you check if a user has asked to reduce motion, such as animations or transitions. Use this feature to turn off animations and transitions for the users who has activated this setting on their computer:

Example

@media (prefers-reduced-motion: reduce) {

  * {

    animation: none !important;

    transition: none !important;

  }
}

Responsive Image Gallery

Here, we use media queries together with flexbox to create a responsive image gallery:

Example

<iframe src="/howto/tryhow_css_image_grid_responsive.htm" style="background:white;border:none;width:100%;height:600px;"></iframe>

Responsive Website

Here, we use media queries together with flexbox to create a responsive website:

Example

<iframe src="trycss3_flexbox_website_ifr.htm" style="border:2px solid #ddd;width:100%;height:625px;"></iframe>

CSS Responsive Web Design

To learn more about responsive web design, read our Responsive Web Design Tutorial.