How To Make Your Website's Design Responsive ?

What Is Responsive Design ?

Responsive design of a website refers to it's ability of appearing uniformly and nicely in different devices.For example,some website's appear in a same and nice way in mobile also and in Desktop also but some websites,even if nice in Desktop ,appear to topsy-turvy,mashing and non-understandable in mobiles,this is because the mobile devices understand CSS same as Desktop and by doing this they take the size of your desktop CSS.

About This CSS Code

This code is designed to resize your website's template and make a few things disappear in different devices,to comfort their views.This CSS lets the main content,header etc. important things allowed in different devices but removes sidebar,footer etc. in mobile devices to decrease the loading time and adjust the things accordingly.

Steps To Add It:-

• Go to Template tab of your blog's HTML
• Click on Edit HTML button
• Search For  ]]></b:skin>
• Add the following piece of codes before it

/*-------------------------------------------------------------------*/
/* Responsive CSS By http://technopcarea.blogspot.com/ Starts  */
/*-------------------------------------------------------------------*/
/*---------CSS for small screen by http://technopcarea.blogspot.com/---------*/
@media screen and (max-width:300px) { #sidebar-wrapper{display:none;} #container{width:100%;background:none;padding-top:0;} #content-wrapper{width:auto;padding:0 5px;} #main-wrapper{width:100%;padding:0;} #navigation{display:none;} .jump-link,.comment-link,.breadcrumbs{display:none;} }
/*---------CSS for small screen by http://technopcarea.blogspot.com/-------------*/
/*-----------Common CSS Starts------------*/
.mobile #header{text-align:left;color:#fafafa;margin:auto;padding:10px;float:left;width:auto;height:auto;margin-top:10px;} .mobile #container{width:100%;background:none;padding-top:0;} .mobile #content-wrapper{width:auto;padding:0 5px;font:13x Droid Serif;} .mobile #mainout-wrapper{width:100%;margin-top:2px;} .mobile #main-wrapper{width:100%;padding:0;} .mobile #navigation{display:none;} .mobile #outer-wrapper{width:100%;margin:0 auto;text-align:$startSide;font:15px Droid Serif;} .mobile h2.post-title,.mobile .comments h4{font:normal 1.6em/120% Georgia, Times, serif;margin:.75em 0 0;} .mobile .post{padding-bottom:10px;} .mobile .post-body{width:100%;font-size:110%;line-height:1.4;position:relative;font:95%/120% Georgia, "Times New Roman", Times, serif;color:#666;padding-bottom:25px;} .mobile .post-header{margin:0 0 1.5em;line-height:1.6;font-size:90%;} .mobile .post-body .tr-caption-container,.mobile .Profile img,.mobile .Image img,.mobile .BlogList .item-thumbnail img{padding:5px;background:#ffffff;color:#666666;} .mobile .post-body img{width:auto;height:auto;} .mobile .post-body .tr-caption-container img{padding:0;background:transparent;border:none;-moz-box-shadow:0 0 0 rgba(0,0,0,.1);-webkit-box-shadow:0 0 0 rgba(0,0,0,.1);box-shadow:0 0 0 rgba(0,0,0,.1);width:100%;height:100%;} .mobile .post-footer{line-height:1.6;font-size:90%;} .mobile .jump-link{display:none;} .mobile .comment-link{display:none;} .mobile .breadcrumbs{display:none;} .mobile #sidebar-wrapper{float:$endSide;padding:0 10px;margin:10px 0 0 10px;width:100%;} .mobile .sidebar{margin-left:5px;padding:0 10px;} .mobile #comment-zone,.mobile .comments,.mobile #gcontainer,.mobile .Cba,.mobile comment-form{width:100%;max-width:99%;margin-right:20px;} .mobile .footer{width:100%;} .mobile #footer-wrapper,.mobile #footer,.mobile .footer,.mobile .footer .widget{width:auto;padding-right:10px;} .mobile #credit{padding-left:10px;}
/*-------------------------------------------------------------------*/
/* Responsive CSS By http://technopcarea.blogspot.com/ Ends  */
/*-------------------------------------------------------------------*/

Final Words

This CSS code is designed for most of the templates,because they have common coding but it might not work on all of the templates.Adding this CSS is really easy and this turns your simple website design into responsive for most of the devices.