How To Make Your Blogger Template Responsive ?

Hello Guys.Responsive templates are now becoming common and common .Living in the world of tablets and i phones have forced us to design templates in such a way that fit almost all modes of Browsing.Weather it is via a apple iPhone or and iPad  Mobile surfing has now become a renown resource of traffic to blogs and website.So forth you cannot avoid the need of creating a wonderful surfing experience for them too.If you are unable to adjust to the need of the people you are least like to be successful.

"Responsiveness Of a Template"-Short Description

When I say that you must be having a responsive template for blogger, it means that your template must be adjustable to different modes of browsing and most of all it should provide equivalent amount of comfort and easiness to all forms of browsing.A responsive template does it's job by adjusting the sizes of the template by itself to the required .Which means that it doesn't matter whether you surf the site with a mobile or  tablet, you get the same comfort and the experience is no more different form browsing it in desktop

Make your Blogger Template Responsive-The Code

Search For the Following Code

]]></b:skin>

Now Paste the Following Code above the Searched Code

@media screen and (max-width: 1230px){
#header {                float:none;                max-width:none;                text-align:center;     }
#header-inner {  margin-bottom:0px;  }
#header h1 {                margin-right:0px;        }
#header p.description {  margin:0;  }
#header-right {  position:relative;  right:0;  text-align: center;  margin : 0 !important;  }
.header-right-inner {  margin: 0 30px ! important;  }
.main-nav-top{ clear:both; float:none; }
.main-nav-main {        margin:10px 0 0 0;    }
#nav-search {        float:none;        margin:0;    }
}
@media screen and (max-width: 960px) {
.sidebar-wrapper{   position:relative; top:auto;  right:auto;  clear:both;  left:auto;  width:auto;  margin: 0 -15px;  background: none;    }
.subscribe_outer {    margin: 0 -20px;    }
.main-wrapper{    margin-right:0;    width:100%;    min-height: 0px;    }
.ct-wrapper{    padding:0 15px;    }
#content {    padding: 5px;   clear: both;    border-radius: 0;    }
.sidebar-wrapper .sidebar{    margin: 15px;    }
.sidebar-wrapper .widget{    border: none;    margin: 0px auto 10px auto;    padding: 10px 20px; }
}
@media screen and (max-width: 768px){
.header-wrapper {    margin-right: 0;    min-height: 0;    width: 100%;    }
#header {    text-align: center;    width: 100%;    max-width: none;    }
#header-inner {   margin:30px 0 0;  }
#header h1 {    font-size:35px;    }
.main-nav-top, .main-nav-main,
.main-nav-top ul, .main-nav-main ul{    text-align:center;    }
.related-post {    width:auto;    }
#comment-editor {    margin:10px;    }
.footer {    margin:15px;    width:auto;    }
.footer-credits .attribution{    display:none;    }
}
@media screen and (max-width: 500px){
#header img {    width:100%;    }
}
@media screen and (max-width: 420px){
#header h1 {    font-size: 30px;    margin: 10px;    }
.main-nav-main ul li{    margin:4px 10px;    float:none;    }
.comments .comments-content .datetime{    display:block;    float:none;    }
.comments .comments-content .comment-header {    height:70px;    }
}
@media screen and (max-width: 320px){
.ct-wrapper{    padding:0;    }
.footer .footer-inner {    padding: 45px 10px 10px 10px;    }
.comments .comments-content .comment-replies {    margin-left: 0;    }
}

Conclusion and remarks

Making a Blog compleetly responsive is a big task.But adding the above code will do 80% of the job.Now just try to resize your blog to find whether this things work or nor.Taraa.Have fun