Free Advanced Web Design Tutorials

Step 5 - Responsive Web Design - Step by Step Example

<< Index

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.

Resonsive Design Example Website
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; 
.pageFooter p {
	 width: 90%;
       margin: 2% auto;

Footer Step is now complete

<< Step 4