Skip to content

Instantly share code, notes, and snippets.

@joby-lol
Last active November 12, 2019 20:07
Show Gist options
  • Save joby-lol/10386885 to your computer and use it in GitHub Desktop.
Save joby-lol/10386885 to your computer and use it in GitHub Desktop.
CSS for making "Simple" Blogger theme fluid-width
/*
CSS to enable a fluid layout for Blogger's "Simple" theme
by Joby Elliott -- www.byjoby.com
*/
/* remove odd margins on images, make their size fluid and limited to their container */
.widget.Blog img {box-sizing:border-box;height:auto !important;width:auto: !important;max-width:100%;}
.widget.Blog a[imageanchor] {margin:0 !important;}
/* remove padding from content area, set smaller min-widths */
.content-inner {padding:0;}
body, .content-outer, .content-fauxcolumn-outer, .region-inner {min-width:300px !important;}
/* stack footer columns at smaller widths */
@media screen and (max-width:700px) {
table.section-columns td {display:block;width:100% !important;max-width:400px;margin:0 auto;margin-top:30px;text-align:center;}
}
<!--
How to set up responsive-friendly viewport meta tags
in Blogger's "Simple" theme
Make these changes after clicking "Edit HTML" on the Template page
-->
<!-- Find where it looks like this (it will be right at the top) -->
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<!-- Remove 4 of 5 lines so it looks like this -->
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Copy link

ghost commented Mar 31, 2018

Worked for me, Thank You.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment