Make Blogger Template Responsive

Feel the real responsive experience in your default blogger template. It make your site content more readable with all devices like PC, laptop, tablet and mobile.

• Go to Template > Customize > Advanced > Add CSS
• Add the code below.

Fixed Width Responsive

It will preserve the page content width. Resize the browser window to see the effect.

@media only screen and (max-width : 992px) {
.column-center-outer, .column-left-outer, .column-right-outer {float: none; width: 100% !important; position: inherit; margin: 0 !important; }
.column-left-outer, .column-right-outer {padding-top: 30px;}
.columns {padding: 0 !important;}
}

Change the max-width value you wish to response with.

Fluid Width Responsive

It will flow page content depend on browser window size. Resize the browser window to see the effect.

@media only screen and (max-width : 992px) {
.column-center-outer, .column-left-outer, .column-right-outer {float: none; width: 100% !important; position: inherit; margin: 0 !important;}
.column-left-outer, .column-right-outer {padding-top: 30px;}
body, .content-outer, .content-fauxcolumn-outer, .region-inner { min-width: 100% !important}
.columns {padding: 0 !important;}
}

Change the max-width value you wish to response with.