Further to the Template with two Sidebar
4. Find the code as below (located in the
<b:template-skin>)body { min-width: $(content.width); } .main-inner .column-left-outer { width: $(main.column.left.width); right: 100%; margin-left: -$(main.column.left.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-left-outer { width: 20%; right: 80%; position: absolute; margin-left: -$(main.column.left.width); } .main-inner .column-right-outer { width: 20%; float: right; margin-right: -$(main.column.right.width); } Then add the following code, placed just below the code above
.main-inner .column-center-outer{ left:20%; width:60%; } 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;} } @media screen and (max-width:768px){ .main-inner .column-left-outer{position:relative;left:0;margin:auto;width:100%} .main-inner .column-center-outer{left:0;width:100%} .main-inner .column-right-outer{float:none;width:100%;} .footer-inner, .main-inner .column-left-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-left-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-left-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;} } @media screen and (max-width:768px){ .main-inner .column-left-outer{position:relative;left:0;margin:auto;width:100%} .main-inner .column-center-outer {left:0;width:100%;} .main-inner .column-right-outer {float:none;width:100%} .main-inner .column-left-inner, .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;} } @media screen and (max-width:768px){ .main-inner .column-left-outer{position:relative;left:0;margin:auto;width:100%} .main-inner .column-center-outer {left:0;width:100%;} .main-inner .column-right-outer {float:none;width:100%} .main-inner .column-left-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: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 9 and replace it with the code below
.main-inner .column-center-inner{padding:0} .main-inner column-left-inner, .main-inner .column-right-inner{padding:20px} 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 template. (except Dynamic Template).
Next
How to display post excerpt and thumbnail on the homepage of the blog.
