Free Advanced Web Design Tutorials

Step 3 - 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 main content, top side-bar and the header of the webpage will automatically respond to the size of your browser window. The rest of the webpage is not yet responsive.

Responsive Design Example Website
Side-bar Navigation - Step 3.1

In Step 3.1, CSS3 style is applied to the Side-bar Navigation to change width and margin.

The style is provided below with HTML comment explanation.

The style is provided below with HTML comment explanation.

.top-sidebar {
	width: 80%; /* Width increased to 80% */
	float: left;
	margin-top: 4%;
	margin-left: 0;
	padding: 0 7%;
}
		

Side-bar Navigation Step is now complete

<< Step 2 Step 4 >>