CSS Media Queries Examples
Delivering different styles to different devices is a popular job for media queries. CSS rules can then depend on device characteristics, viewport width among them.
Example
The background color here changes as the viewport width changes.
Prompt
Create a page that uses media queries to change the body background color at different viewport widths: olive for mobile, blue at 768px, and tan at 992px. Include white text for the first two and black text for the last.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Breakpoints</title>
<style>
body {
background-color: olive;
color: white;
}
@media screen and (min-width: 768px) {
body {
background-color: blue;
color: white;
}
}
@media screen and (min-width: 992px) {
body {
background-color: tan;
color: black;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The background color will change at different viewport widths.</p>
</body>
</html>
Media Queries For Columns
Flexible layouts are another common use. Depending on the screen size, the layout here moves between four columns, two columns and full-width columns.
The CSS Flexbox chapter explains the Flexible Box Layout Module in more depth.
For more on Responsive Web Design, see the Responsive Web Design Tutorial.
Example
Prompt
Create a page with four equal-width columns using flexbox. Use media queries so the columns become two per row at 992px or less, and stack into a single column at 600px or less. Each column should have some sample text content.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Columns Layout</title>
<style>
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 25%;
padding: 20px;
}
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout</h2>
<p>Resize the browser window to see the responsive effect.</p>
<div class="container">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text inside the first column.</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text inside the second column.</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text inside the third column.</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text inside the fourth column.</p>
</div>
</div>
</body>
</html>
Media Queries For Menus
A navigation menu can become responsive too, with a design that adapts to each screen size through media queries.
Example
Prompt
Create a horizontal navigation menu using an unordered list and flexbox. Style the links with white text on a dark background (#333). Use a media query to stack the menu items vertically when the viewport is 600px or less.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
<style>
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;
}
@media screen and (max-width: 600px) {
ul {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Navigation Menu</h2>
<p>Resize the browser window to see the effect.</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Hide Elements With Media Queries
Small screens may not need every element, and a media query can hide the ones they don't.
Example
Prompt
Create a page with a styled div element that is hidden when the viewport width is 600px or less, using a media query with display: none.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Element With Media Query</title>
<style>
#div1 {
background-color: lightgreen;
padding: 20px;
font-size: 20px;
}
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
</style>
</head>
<body>
<h2>Hide Elements on Small Screens</h2>
<p>Resize the browser window. The green box will be hidden at 600px or less.</p>
<div id="div1">I will be hidden on small screens.</div>
</body>
</html>
Change Font Size With Media Queries
An element's font size can also follow the viewport width, through a media query.
Example
Prompt
Create a page with a div element whose font size changes to 80px when the viewport width is 600px or more, using a media query with min-width.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Font Size With Media Query</title>
<style>
#div1 {
font-size: 20px;
}
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
</style>
</head>
<body>
<h2>Change Font Size</h2>
<div id="div1">Resize the browser window to see the font size change.</div>
</body>
</html>
Media Queries for Screen Orientation
Screen orientation is another condition a media query can respond to, adjusting the page layout accordingly.
Example
While the screen is in landscape orientation, the body gets a different background color.
Prompt
Create a page that uses a media query to change the body background color to lightblue when the screen orientation is landscape.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Orientation Media Query</title>
<style>
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h2>Screen Orientation</h2>
<p>The background color will be lightblue when the screen is in landscape mode.</p>
</body>
</html>
Media Queries for User Preferences
Animation can be a problem for people with motion sensitivity, who prefer websites that have less of it.
To find out whether a user has asked for reduced motion, such as fewer animations or transitions, check the prefers-reduced-motion media feature. When that setting is active on their computer, you can turn animations off.
Example
Prompt
Create a page that uses the prefers-reduced-motion media feature to disable all animations and transitions when the user has requested reduced motion.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prefers Reduced Motion</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: coral;
animation: slide 2s infinite alternate;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(300px); }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h2>Prefers Reduced Motion</h2>
<p>If you have "reduce motion" enabled in your system settings, the animation below will be disabled.</p>
<div class="box"></div>
</body>
</html>
Responsive Image Gallery
Combining flexbox with media queries gives you a responsive image gallery.
Example
Prompt
Create a responsive image gallery using flexbox and media queries. Display four images per row on large screens, two per row on medium screens (below 800px), and one per row on small screens (below 600px). Use placeholder images.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
width: 100%;
padding: 5px;
}
.gallery-item {
flex: 25%;
padding: 5px;
}
@media screen and (max-width: 800px) {
.gallery-item {
flex: 50%;
}
}
@media screen and (max-width: 600px) {
.gallery-item {
flex: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the responsive effect.</p>
<div class="gallery">
<div class="gallery-item">
<img src="img_5terre.jpg" alt="Cinque Terre">
</div>
<div class="gallery-item">
<img src="img_forest.jpg" alt="Forest">
</div>
<div class="gallery-item">
<img src="img_lights.jpg" alt="Northern Lights">
</div>
<div class="gallery-item">
<img src="img_mountains.jpg" alt="Mountains">
</div>
</div>
</body>
</html>
Responsive Website
The same combination of flexbox and media queries can lay out a whole responsive website.
Example
Prompt
Create a responsive website layout with a header, navigation bar, main content area with a side column, and a footer. Use flexbox and media queries so the layout stacks vertically on small screens (below 600px).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
.navbar {
display: flex;
background-color: #555;
}
.navbar a {
color: white;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #333;
}
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
}
@media screen and (max-width: 600px) {
.navbar, .row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<p>Some text about me in a side column.</p>
</div>
<div class="main">
<h2>Title</h2>
<p>Some text about the main content.</p>
<p>More text to fill the main area.</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>