I like to recommend you to possess responsive template for your blog. A responsive template will it’s job by adjusting the sizes of the example by itself to the specified size of that particular device. In different words, if somebody browse your site in mobile then your site template ought to conscious of that device resolution.
How to make your Blogger Template Responsive
- In your Blogger Dashboard go to Template section
- There click “Edit HTML“
- Then search ]]></b:skin>
- Once you finished searching ]]></b:skin> then paste the following code just above ]]></b:skin>
@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; }
}
- Now save your template !
- That’s it !
Using Meta Tag
Step 1: Go To Blogger >> Template >> Backup Your Template
Step 2: Click Edit HTML >> Search For <head> tag and Paste the following Code below/after <head>.
Step 3: Once you finish just Save you template.
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″/>
Step 4: Then again search for ]]></b:skin> then paste the following code just above ]]></b:skin>
@media screen and (max-width : 1280px)
{/* CSS FOR DESKTOP OR ABOVE 1280 PIXEL—-*/}
@media screen and (max-width : 1024px)
{/* CSS FOR TABLETS WITH BIG DISPLAY ————*/}
@media screen and (max-width : 768px)
{/* CSS FOR TABLETS WITH SMALL DISPLAY————*/}
@media screen and (max-width : 640px)
{/* CSS FOR SMARTPHONES / IPHONE ————*/}
@media screen and (max-width : 480px)
{/* CSS FOR MOBILES ————*/}
@media screen and (max-width : 320px)
{/* CSS FOR SMALL RESOLUTION MOBILES ————*/}
Step 5: Now just save your template and enjoy!