How to make blogger more responsive

This blog is hosted on Blogger.com - primarily for expediency.

• I don’t like the HTML it generates
• And I don’t like the templates (i.e. how it looks)

But other than that, it is fine.
For a while I’ve been wanting to make the blog more ‘responsive’.

• I don’t particularly like the fixed sizing
• and I don’t like the small screen formatting

I had a quick look around are responsive templates for blogger.
But:

• I didn’t really trust them
• I thought I would have to reconstruct my sidebar etc.
• It all seemed too much work

I tried using the Advanced editing on the template to add some CSS but:

• The custom CSS is added into the HTML before the Template CSS
• So the template CSS overrides your custom CSS

So, I bit the bullet:

• visit the site
• use dev tools to find the ‘key’ areas to influence
• hack around with the CSS

And I came up with this:

---

/* Minimal Hack to make blogger more responsive
     Added in the Template HTML Template Skin Section
     At the bottom
     20160902
*/

.content-outer{
     min-width:none;
     max-width:1400px;
     margin: auto;
}

img#Header1_headerimg{
     margin:auto;
}

/* push sidebar to the bottom - content break, not device break*/
@media only screen and (max-width: 900px){

.content-outer{
     min-width:0;
     max-width:auto;
     margin: auto;
}

.column-center-outer{
     width:100%;
}
.main-inner .column-right-outer{
     width:100%;
     margin-right:0px;
}
.main-inner .fauxcolumn-right-outer{
     width:100%;
}
.main-inner .fauxcolumn-center-outer{
     width:100%;
}
.main-inner .columns{
     padding-right:0;
}

img#Header1_headerimg{
     max-width:100%;
     height:auto;  
}
body{
     min-width:0;
}
}

/* End of minimal hack to make blogger more responsive
    20160902
*/

---

It isn’t pretty.
But it basically says. If the screen is bigger than 900 pixels then allow it to resize.
If it is below 900 pixels then move the side bar to the bottom of the screen and make everything fit the width.
Oh, and resize the header image to fit the screen (if I add one to this blog).
Why 900? Because.
I chose a content break, rather than a device break. And on some of my other blogs, choosing 900 seemed like the right choice.
In blogger I have to:

• go to the blog dashboard
• choose ‘Template’
• Edit HTML
• Expand <b:template-skin> ...</b:template-skin> in the editor
• and right at the bottom of this section, above the ]]> I add my ‘hack’ CSS

Just in case anyone else is still on Blogger, and wants to make their blog a little more responsive.
Feel free to adjust the max-width in the media query for your own personal preferences.