Learn how to build and design websites with our tutorials.

Responsive Layout Tutorial Tutorial

View Tutorial Contents

This tutorial is meant to teach you the core concepts on how to create responsive layouts with the use of @media queries.

It is always recommended that you make your websites responsive, also referred to as fluid layouts. This means that your websites should fit the screen size. It should not matter if you are viewing your website on a laptop, tablet, smart phone, etc.

For example, if you are viewing this web page on a desktop or a laptop, you can resize the web browser window and see that the layout of the website changes depending on the size of the web browser window. Regardless of the size of the web browser window, the layout should still fit within the web browser window and still look as I want it to look.


px vs em

I recommend that you use em units instead of px units when it comes to web design, that includes responsive web design. With that being said, I find it easier to first use pixels to create the layout, and then to convert the pixels to em units before I start applying the @media rules.

To convert pixels to em units, you can use our px to em Conversion Tool.


Non-responsive Layout Example

The example below is of a web page with only a header that has a width of 900 pixels. If you resize the browser window of the web page below 900 pixels, you will see that the web page extends beyond the browser window or if you are on a device that is smaller than 900 pixels, the width of the web page is larger than the browser window. You do not want this to happen.

When the layout of a web page is larger than the browser window, a scroll bar will appear at the bottom of web page that allows you to scroll to see the rest of the layout that is not currently visible.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

#header{
width:	900px;
height:	200px;
margin:	0 auto;
padding:	0;
}

</style>

</head>
<body>

<header id="header">

<h1>
This is a heading
</h1>

</header>

</body>
</html>

To see an example of how the example code above looks, Click Here.


Applying @media Queries

The example below shows you how to apply @media queries. When the browser window is resized to 900 pixels or less, the width of the <header> div is converted to 100%. The background color is also converted yellow so that you can more easily that the @media queries are applied.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

#header{
width:	900px;
height:	200px;
margin:	0 auto;
padding:	0;
}
@media screen and (max-width: 900px){
	#header{
		width: 100%;
		border: none;
		background: yellow;
	}
}

</style>

</head>
<body>

<header id="header">

<h1>
This is a heading
</h1>

</header>

</body>
</html>

To see an example of how the example code above looks, Click Here.


Responsive Layouts and Borders and Padding

Any right and left borders will add to the width of the element. For example, if I apply a border with a width of 20 pixel, the total width of the right and left borders is 40 pixels. This makes the total width of the total <header> 940 pixels instead of 900 pixels. To fix this problem, set the box-sizing property with the value of border-box on the <header> element. This results in the padding width and the border size not increasing the width of the element.

In the example code below, I will NOT use the box-sizing property so that you can first see a real live example of when it is not applied. The web page that it creates will break at 940 pixels instead of 900 pixels because of the right and left borders, which each have a width of 20 pixels.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

#header{
width:	900px;
height:	200px;
margin:	0 auto;
padding:	0;
border: 20px solid black;
}
@media screen and (max-width: 940px){
	#header{
		width: 100%;
		border: none;
		background: yellow;
	}
}

</style>

</head>
<body>

<header id="header">

<h1>
This is a heading
</h1>

</header>

</body>
</html>

To see an example of how the example code above looks, Click Here.

The example below is the same as the one above, except that the <header> element has the box-sizing property applied to it so that the width of the <header> element remains at 900 pixels, even with the borders.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

#header{
width:	900px;
height:	200px;
margin:	0 auto;
padding:	0;
border: 20px solid black;
-webkit-box-sizing:border-box;
-moz-box-sizing:	border-box;
box-sizing:		border-box;
}
@media screen and (max-width: 940px){
	#header{
		width: 100%;
		border: none;
		background: yellow;
	}
}

</style>

</head>
<body>

<header id="header">

<h1>
This is a heading
</h1>

</header>

</body>
</html>

To see an example of how the example code above looks, Click Here.


Responsive Layouts and Margins

When making responsive layouts, you should also know that the right and left margins of an element will add to the width of that element. For example, if an HTML element has a width of 900 pixels and the right and left margins are 50 pixels, the breaking point for that element when it is resized would be 1,000 pixels.

In the code example below, the <header> element has a width of 900 pixels. Its right and left margins are 50 pixels each, making the width of the <header> element 1,000 pixels, which is its breaking point when it is resized.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

#header{
width:	900px;
height:	200px;
margin:	0 50px;
padding:	0;
border: 1px solid black;
-webkit-box-sizing:border-box;
-moz-box-sizing:	border-box;
box-sizing:		border-box;
}
@media screen and (max-width: 900px){
	#header{
		width: 100%;
		border: none;
		background: yellow;
	}
}

</style>

</head>
<body>

<header id="header">

<h1>
This is a heading
</h1>

</header>

</body>
</html>

To see an example of how the example code above looks, Click Here.


Responsive Header Demo

Next, I will create a responsive header. The header area will have a title that will be floated to the left when displayed at larger screen sizes and will move to the top when the screen is smaller. The header area will have some links that are floated to the right when displayed at larger screen sizes and will move to the center of the header when the screen is resized to a smaller size. I will also have a have a simple navigation menu at the bottom of the header that spans the width of the header.

I will also give each area different border and background colors so that you can easily see the placement of those areas. I will remove them when I begin to apply the @media rules.

To begin, I will create the <header> container.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

*{
font-size: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#header-wrap{
width:	100%;
height:	auto;
margin:	0;
padding: 0;
background: yellow;
}
#header-wrap #header{
width: 900px;
height: 125px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
background: black;
}
#header-wrap .title{
float: left;
width: 600px;
height: 75px;
margin: 0;
padding: 0;
border: 1px solid red;
background: red;
}
#header-wrap .title h1{
margin: 5px;
padding: 0;
font-size: 2em;
color: #000;
}
#header-wrap .contact{
float: right;
width: 250px;
height: 75px;
margin: 0;
padding: 0;
border: 1px solid green;
background: green;
}
#header-wrap .contact ul{
display: inline;
width: 100%;
margin: 0;
padding: 0;
}
#header-wrap .contact ul li{
display: inline;
}
#header-wrap .nav{
clear: both;
width: 100%;
height: 50px;
line-height: 16px;
text-align: center;
vertical-align: middle;
margin: 0;
padding: 17px 0 0 0;
border: 1px solid pink;
background: pink;
}

</style>

</head>
<body>

<header id="header-wrap">

<div id="header">

<div class="title">

<h1>
Your Website
</h1>

</div>

<div class="contact">

<ul>
<li>(000)123-4567</li>
<li><a href="#">Contact</a></li>
</ul>

<nav>
<a href="#">HOME</a>
<a href="#">Domains</a>
<a href="#">Web Design</a>
<a href="#">Hosting</a>
</nav>

</div>

</div>

</header>

</body>
</html>

To see an example of how the example code above looks, Click Here.

I will now convert the pixel units to em units.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

*{
font-size: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#header-wrap{
width:	100%;
height:	auto;
margin:	0;
padding: 0;
background: yellow;
}
#header-wrap #header{
width: 56.25em; /* 900px */
height: 7.813em; /* 125px */
margin: 0 auto;
padding: 0;
border: 0.063em solid black; /* 1px */
background: black;
}
#header-wrap .title{
float: left;
width: 37.5em; /* 600px */
height: 4.688em; /* 75px */
margin: 0;
padding: 0;
border: 0.063em solid red; /* 1px */
background: red;
}
#header-wrap .title h1{
margin: 0.313em; /* 5px */
padding: 0;
font-size: 2em;
color: #000;
}
#header-wrap .contact{
float: right;
width: 15.625em; /* 250px */
height: 4.688em; /* 75px */
margin: 0;
padding: 0;
border: 0.063em solid green; /* 1px */
background: green;
}
#header-wrap .contact ul{
display: inline;
width: 100%;
margin: 0;
padding: 0;
}
#header-wrap .contact ul li{
display: inline;
}
#header-wrap .nav{
clear: both;
width: 100%;
height: 3.125em; /* 50px */
line-height: 1em; /* 16px */
text-align: center;
vertical-align: middle;
margin: 0;
padding: 1.063em 0 0 0; /* 17px 0 0 0 */
border: 0.063em solid pink; /* 1px */
background: pink;
}

</style>

</head>
<body>

<header id="header-wrap">

<div id="header">

<div class="title">

<h1>
Your Website
</h1>

</div>

<div class="contact">

<ul>
<li>(000)123-4567</li>
<li><a href="#">Contact</a></li>
</ul>

<nav>
<a href="#">HOME</a>
<a href="#">Domains</a>
<a href="#">Web Design</a>
<a href="#">Hosting</a>
</nav>

</div>

</div>

</header>

</body>
</html>

To see an example of how the example code above looks, Click Here.

Now I will apply the @media rules when the browser window is less than 900 pixels.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

*{
font-size: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#header-wrap{
width:	100%;
height:	auto;
margin:	0;
padding: 0;
background: yellow;
}
#header-wrap #header{
width: 56.25em; /* 900px */
height: 7.813em; /* 125px */
margin: 0 auto;
padding: 0;
border: 0.063em solid black; /* 1px */
background: black;
}
#header-wrap .title{
float: left;
width: 37.5em; /* 600px */
height: 4.688em; /* 75px */
margin: 0;
padding: 0;
border: 0.063em solid red; /* 1px */
background: red;
}
#header-wrap .title h1{
margin: 0.313em; /* 5px */
padding: 0;
font-size: 2em;
color: #000;
}
#header-wrap .contact{
float: right;
width: 15.625em; /* 250px */
height: 4.688em; /* 75px */
margin: 0;
padding: 0;
border: 0.063em solid green; /* 1px */
background: green;
}
#header-wrap .contact ul{
display: inline;
width: 100%;
margin: 0;
padding: 0;
}
#header-wrap .contact ul li{
display: inline;
}
#header-wrap .nav{
clear: both;
width: 100%;
height: 3.125em; /* 50px */
line-height: 1em; /* 16px */
text-align: center;
vertical-align: middle;
margin: 0;
padding: 1.063em 0 0 0; /* 17px 0 0 0 */
border: 0.063em solid pink; /* 1px */
background: pink;
}
@media screen and (max-width: 56.25em /* 900px */){
	#header-wrap #header{
		width: 100%;
		height: 9.375em; /* 150px */
	}
	#header-wrap .title{
		width: 100%;
		text-align: center;
	}
	#header-wrap .contact{
		width: 100%;
		height: 1.563em; /* 25px */
		margin: 0 auto;
		text-align: center;
	}
}

</style>

</head>
<body>

<header id="header-wrap">

<div id="header">

<div class="title">

<h1>
Your Website
</h1>

</div>

<div class="contact">

<ul>
<li>(000)123-4567</li>
<li><a href="#">Contact</a></li>
</ul>

<nav>
<a href="#">HOME</a>
<a href="#">Domains</a>
<a href="#">Web Design</a>
<a href="#">Hosting</a>
</nav>

</div>

</div>

</header>

</body>
</html>

To see an example of how the example code above looks, Click Here.

The header is now responsive. Notice the changes that have been applied within the @media rule.