Step 5 - Responsive Web Design - Step by Step Example

This is what we are going to create in this step by step tutorial. Click on the image to visit the example website. Try restoring the browser window to see what happens, now the entire webpage will automatically respond to the size of your browser window.

Footer - Step 5.1

In Step 5.1, CSS3 style is applied to the Footer to change line-height and margin.

The style is provided below with HTML comment explanation.

.pageFooter {
	 width: 100%;
	 float: left;
	 margin: 2% 0;
	 padding-left: 0;
	 background-color: #2BA6CB;
	 border-radius: 5px;
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px; 
	 color: #FFF; 
	 line-height:15px;
}
 
.pageFooter p {
	 width: 90%;
       margin: 2% auto;
}
		

Footer Step is now complete