Tips Tutorial How To Make Responsive Blogger Template

Now you can get the default blogger template already responsive (free). Check here.

For a template with a sidebar on the right, stay here.
Find the code as below (located in the <b:template-skin>)

body { min-width: $(content.width); } .main-inner .column-right-outer { width: $(main.column.right.width); margin-right: -$(main.column.right.width); }

Change or replace be as below

body { width: 1100px; margin:0 auto; min-width: $(content.width); } .main-inner .column-right-outer { width: 30%; float: right; margin-right: -$(main.column.right.width); }

Then add the following code, placed just below the code above

.main-inner .column-center-outer{ float: left; width:65%; }

Value width (.main-inner) above, can be changed to your liking, on the condition that the maximum amount of 100%

5. Copy the code css below, then paste it just above code ]]></b:skin>, Please select css code, in accordance with the type of template you are using.

For users Simple Templates and Travel Template, please copy css code below

 /*Responsive*/       @media screen and (max-width:1024px){         body{width:100%!important;padding:0;}         .content-inner{overflow: hidden;}       }       @media screen and (max-width:768px){         .main-inner .column-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}         .footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}         .Header h1{font-size:30px;text-align:center;}         .Header .description{font-size:14px;text-align:center;}       }       @media screen and (max-width:414px){         .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}       }       @media screen and (max-width:320px){         .fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}         .fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}         .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}       }

For users Awesome Inc. template, please copy code css below

/*Responsive*/       @media screen and (max-width:1024px){         body{width:100%!important;padding:0;}         .content-inner{overflow: hidden;}       }       @media screen and (max-width:768px){         .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}         .main-inner .column-right-inner, .main-inner .column-center-inner{padding:0}         .main-inner .section {margin:0 15px}         .Header h1{font-size:30px;text-align:center;}         .Header .description{font-size:14px;text-align:center;}       }

For users Picture Window Template, please copy css code below

/*Responsive*/       @media screen and (max-width:1024px){         body{width:100%!important;padding:0;}         .content-inner{overflow: hidden;}       }       @media screen and (max-width:768px){         .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}         .main-inner .column-center-inner, .main-inner .column-right-inner {padding:0}         .Header h1{font-size:30px;text-align:center;}         .Header .description{font-size:14px;text-align:center;}       }       @media screen and (max-width:320px){         .main-inner .section{margin:0 10px}         .post-outer {padding:10px 10px;}       }

For users template Watermark or Ethereal, same code as Picture Window template, but remove the code number 8 and replace it with the code below

.main-inner .column-center-inner{padding:0} .main-inner .column-right-inner{padding:20px}

6. Save Theme
After the template is saved, then click the Back button, then turn off mobile display. View your blog.

Visit Mobile Friendly Test - Google to find out, What is a blog / web mobile friendly, without activating the mobile view?

Visit Responsive web checker to see the look of your blog on any screen size.

Note :
I only test on the first template, for each type of theme. (except Dynamic Template).

Next
How to display post excerpt and thumbnail on the homepage of the blog.