CSS MQ - Examples
CSS Media Queries - More Examples
Here are a few more instances of how we can use media queries.
Media queries are a widely-used method to provide a customized design for various devices. To illustrate this with a straightforward example, we can adjust the background color for different devices using the 'width' and 'height' attributes.
Do you wonder why we use exactly 992px and 600px? They are what we call "typical breakpoints" for devices. You can read more about typical breakpoints in our Responsive Web Design Tutorial.
Media Queries For Menus
In this sample, we employ media queries to make a flexible navigation menu. It changes its appearance depending on the size of the screen.
Media Queries For Columns
Media queries are often used to make layouts that work well on different screen sizes. Here's an example where we create a layout with columns that change their width depending on the screen size:
Tip: A more modern way of creating column layouts, is to use CSS Flexbox (see example below).
However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).
Hide Elements With Media Queries
Media queries are often used to hide things on various screen sizes.
I will be hidden on small screens.
Change Font Size With Media Queries
You can adjust the text size of an element for various screen sizes using media queries.
Variable Font Size.
Flexible Image Gallery
In this demonstration, we employ media queries alongside flexbox to design a dynamic picture collection.
Flexible Website
In this example, we combine media queries and flexbox to make a website that adjusts nicely to different screen sizes. This website has a navigation bar and content that can stretch and shrink as needed.
Orientation: Portrait / Landscape
Media queries can adjust how a webpage looks based on whether the browser is in portrait or landscape mode.
You can use certain CSS properties that will work only when the width of the browser window is greater than its height. This is known as the "Landscape" orientation.
Min Width to Max Width
You can set the smallest and largest width using these codes: (max-width: ..) and (min-width: ..).
For example, When the size of the browser window is between 600 and 900 pixels wide, modify how a element looks:
Adding more conditions: In the following example, we include an extra condition in our existing set of conditions by using a comma. Think of it like an 'OR' operator.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: tan;
color: black;
}
/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
color: white;
}
}
/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
color: white;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>By default, the background color of the page is "tan". When the screen is 992px wide or smaller, it turns "blue". If the width is 600px or less, it becomes "olive".</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 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%;
}
}
</style>
</head>
<body>
<h2>Responsive navigation menu</h2>
<p>Resize the browser window to see what happens: When the screen is smaller than 600 pixels wide, the navigation menu changes from horizontal to vertical.</p>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* 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%;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout</h2>
<p>Resize the browser window to see how the page adjusts. On screens that are 992 pixels wide or smaller, the columns will change from four columns to two columns. On screens that are 600 pixels wide or smaller, the columns will stack on top of each other instead of being side by side.</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* 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;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout with Flex</h2>
<p>Resize your browser window to observe how the design adjusts. When the screen width is 992 pixels or less, the layout changes from four columns to two. And when it's 600 pixels or less, the columns will stack vertically instead of horizontally.</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: yellow;
padding: 20px;
}
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
</style>
</head>
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the width of the browser is 600 pixels or less, the div element disappears. Try changing the size of the browser window to see what happens.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
</style>
</head>
<body>
<h2>Change the font size of an element on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the browser is narrow, make the text in the box bigger, around 30 pixels. When it's wider, make it even bigger, around 80 pixels. Try changing the size of your browser window to see what happens.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="/assets/files/alps.jpg" style="width:100%">
<img src="/assets/files/border-collie.jpg" style="width:100%">
<img src="/assets/files/train.jpg" style="width:100%">
<img src="/assets/files/space-needle.jpg" style="width:100%">
<img src="/assets/files/fox-squirrel.jpg" style="width:100%">
<img src="/assets/files/flower-purple.jpg" style="width:100%">
<img src="/assets/files/flower-2.jpg" style="width:100%">
</div>
<div class="column">
<img src="/assets/files/horse.jpg" style="width:100%">
<img src="/assets/files/flower-1.jpg" style="width:100%">
<img src="/assets/files/trees.png" style="width:100%">
<img src="/assets/files/venus.jpg" style="width:100%">
<img src="/assets/files/eiffel-tower-9.jpg" style="width:100%">
<img src="/assets/files/coffee.jpg" style="width:100%">
</div>
<div class="column">
<img src="/assets/files/venus.jpg" style="width:100%">
<img src="/assets/files/eiffel-tower-9.jpg" style="width:100%">
<img src="/assets/files/coffee.jpg" style="width:100%">
<img src="/assets/files/fox-squirrel.jpg" style="width:100%">
<img src="/assets/files/flower-purple.jpg" style="width:100%">
<img src="/assets/files/flower-2.jpg" style="width:100%">
<img src="/assets/files/alps.jpg" style="width:100%">
</div>
<div class="column">
<img src="/assets/files/venus.jpg" style="width:100%">
<img src="/assets/files/eiffel-tower-9.jpg" style="width:100%">
<img src="/assets/files/coffee.jpg" style="width:100%">
<img src="/assets/files/fox-squirrel.jpg" style="width:100%">
<img src="/assets/files/flower-purple.jpg" style="width:100%">
<img src="/assets/files/flower-2.jpg" style="width:100%">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: rgb(0 151 167);
color: white;
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row,
.navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Note -->
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>
<!-- Header -->
<div class="header">
<h1>My Website</h1>
<p>With a <b>flexible</b> layout. </p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div>
<br>
<div class="fakeimg" style="height:60px;">Image</div>
<br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Adjust the size of the browser window. If this document is wider than it is tall, the background will be light blue; otherwise, it will be light green.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
</style>
</head>
<body>
<h2>Change the appearance of DIV on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the width of the browser is between 600 and 900 pixels, the look of a division on the webpage changes. <strong>Adjust the size of the browser window to see what happens</strong>. </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@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;
}
}
</style>
</head>
<body>
<h2>Change the appearance of DIV on different screen sizes</h2>
<div class="example">Example DIV.</div>
<p>When the width of the browser is between 600 and 900 pixels or above 1100 pixels, the look of a DIV element changes. <strong>Adjust the size of the browser window to observe the effect.</strong>. </p>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL