Blogger CSS Grid Responsive Layout

Published:
Tags:
blogger css responsive
Reading time:
About 3 min

Yeah, a post about how to build a blog. Because owning a blog means that at least 20% of your posts need to be about the tech used in it's own creation. But this one is different. It's the tech used to upgrade a legacy Blogger site to a more modern responsive layout 😃

Why?

Well, while simultaneously an item of pride and embarrassment, I've had this Uncommented Bytes blog running for 17+ years somehow. (And more like 18-19 years but I lost the first bit of it when jRoller, the best hosted blog engine, went under and required the original migration to Blogger.) 

I wrote a post for the first time in a while, and was pretty annoyed with how it looked on mobile

https://twitter.com/sheetsj/status/1352434228483514371

I originally had a green-ish theme, and thought I'd tweak it to be responsive. But even though it was simple-ish, it was using some images for backgrounds and shading that were just overwhelming to try to update in the super-wordy blogger html template. (look at that beautifully retro Google+ link)

https://web.archive.org/web/20181227163052/http://uncommentedbytes.blogspot.com/

So I decided to "upgrade" to a cleaner look theme in Awesome, Inc --- which despite the genius name, was lacking in a couple areas:

  1. Fixed margins -- meaning not responsive to browser width
  2. No mobile friendly view -- mostly because it wasn't responsive, but also because I had used a Blogger switch to render a super generic mobile view too (which I think was triggered by user agent headers, yikes)

How?

Trial-and-error isn't fun to describe, especially when it mostly involves browser devtools CSS hacking. But basically I took the super-wordy HTML template and hacked in some CSS Grid layout. 90% of the hack-magic was accomplished with this bit:

 div.content {
      display: grid;
      gap: 20px;
      grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
      max-width: 100vw;
      margin: 0 auto;
      }

Plus a tiny bit of responsive handling:

 @media
      (min-width: 800px) {
      div.content {
      grid-template-columns: 2fr 1fr;
      grid-template-areas:
      "header header"
      "content sidebar"
      "footer footer";
      max-width: 1280px;
      }
      }
      @media (min-width: 1024px) {
      div.content {
      grid-template-columns: 4fr 1fr;
      }
      }
      .gist .blob-code-inner {
      white-space: pre-wrap !important;
      }

And the last 10% was a few margin and padding tweaks sprinkled in other places. You can see the full code in my Github blogger-css-grid-layout project. And just in case I redesign again in the future, the full inception final product looks like this today: