ad

Create Simple Responsive design with CSS

responsive_1

Responsive web design is the need of modern web design. It makes your website flexible that can adopt the screen size of viewing device and keep website user friendly. I have also posted few free responsive WordPress themes that you can use to make your WordPress website responsive. But, As a web designer, you must learn how to create responsive web design. I also promised to posted series of responsive web design tutorials. Today, I am with a tutorial that will show how to create a basic responsive web design with CSS and media queries.

Please avoid the ugly look of the page. I just created few DIVs to show the web page alignment and its part and add some responsive CSS media queries.

Basic Responsive web design

HTML Part (Save it as index.html)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<title>Responsive Web design</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<div id="header">
<h1>Header to put logo</h1>
</div>
<div id="main">
<div id="leftside">
<h1>This is the content area where you can put your content</h1>

<p>Here you can put the regular content of your website. Images and other main content of posts that you want to put here.</p>
<p>Here you can put the regular content of your website. Images and other main content of posts that you want to put here.</p>
<p>Here you can put the regular content of your website. Images and other main content of posts that you want to put here.</p>
</div>
<div id="rightside">
<div id="widget"><h1>This is side bar of the page</h1></div>
<div id="widget"><h1>This is side bar of the page</h1></div>
</div>
</div>
<div id="footer">
<h1>Footer Goes Here</h1>
</div>
</div>
</body>
</html>

CSS Part (save it as style.css in the same directory with above html file)

body{background:#fff;}

#content
{
background:#fff;
width:100%;
padding:5px;
margin:0 auto;
}
#header
{
background:#666;
width:95%;
padding:10px;
margin:10px;
color:#fff
}
#main
{
width:95%;
padding:10px;
height:auto;
margin:15px;

}
#leftside
{
background:#666;
width:65%;
padding:10px;
color:#fff;
float:left;
height:auto;
margin-bottom:15px;
}
#rightside
{
width:30%;
padding:10px;
color:#fff;
float:right;
height:auto;
margin-bottom:15px;
}
#widget
{
background:#aaa;
width:100%;
padding:10px;
color:#fff;
height:auto;
margin-bottom:5px;
}

#footer
{
clear: both;
background:#666;
width:95%;
padding:10px;
margin:15px;
color:#fff
}

This is the basic layout structure of the web page shown in the screenshot. You can clearly see that the width of the DIV parts is not given in the pixels. I used percentage to define the width.

Now add media queries to make this responsive.

@media screen and (max-width: 1000px){
#leftside
{
width:60%;
}
#rightside
{
width:30%;
}

}

@media screen and (max-width: 700px){
#leftside
{
width:auto;
float:none;
}
#rightside
{
width:auto;
float:none;
}

}

@media screen and (max-width: 480px){
#leftside
{
width:auto;
float:none;
}
#rightside
{
width:auto;
float:none;
}

}

Add above media queries CSS rules in the same CSS file. Now the layout is responsive. It will adjust the layout in the small screen devices. See the example below:

responsive design

 

You can see that side bar is now at the bottom of the main content part while it was at right side of the content part in the big screen devices. You can also make other element adjustments by using CSS media query rules and enhance the design.

In case of any problem, you can comment below

Tags: |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker