Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Now everyone want to make their website responsive but they don't want to switch to new theme or templates. Then don't take problem just follow some step and you can make your current theme or template responsive easily.
You need to forget the HTML properties like px(pixels) and use em or %(percentage).
Example:
Before responsive we use
<div style="margin-left:25px;">S2P Tech</div>
But after that you need to use
<div style="margin-left:10%">S2PTech</div>
You can see DEMO for better understanding.
Here in this demo i use only % or em. I provide you full coding for you.
Now everyone want to make their website responsive but they don't want to switch to new theme or templates. Then don't take problem just follow some step and you can make your current theme or template responsive easily.
You must read: Make Responsive adsense ads
You need to forget the HTML properties like px(pixels) and use em or %(percentage).
Example:
Before responsive we use
<div style="margin-left:25px;">S2P Tech</div>
But after that you need to use
<div style="margin-left:10%">S2PTech</div>
You can see DEMO for better understanding.
Here in this demo i use only % or em. I provide you full coding for you.
<html>
<title>Responsive Tutorial By S2P Tech</title>
<head>
</head>
<body>
<div style=" border:solid; height:20%; background-color:#75A772;">
<center><strong >Header</strong></center>
</div>
<div style=" border:solid; float:left; height:60%;width:20%; background-color:#FF8080;">
<strong ><center>Left SideBar</center></strong>
</div>
<div style=" border:solid; float:right; height:60%; width:20%; background-color:#FF8080;">
<strong ><center>Right SideBar</center></strong>
</div>
<div style=" border:solid; height:60%; background-color:#C2DDE0;">
<strong ><center>Body</center></strong>
</div>
<div style=" border:solid; height:20%; margin-top:0.01em; background-color:#579841;">
<strong ><center>Footer</center></strong>
</div>
</body>
</html>
