How to make your blogger blog more responsive in 2021

I was planning on posting on my intermittent fasting journey week two results, which are exciting, but this topic came along over the weekend when I realized my blog/website didn't have a responsive web design. So this is what we're going with today instead...how to make your blogger blog more responsive in 2021.

This was very frustrating for me cause I assumed that my site automatically had a responsive web design considering it's on Blogger. I discovered that it wasn't through the Google Search Console dashboard and quickly went to work on fixing these errors with my site. 

Wasn't a complicated fix at all but what was complicated was finding updated information on how to do this. I found two very helpful guides to make a more responsive web design for my site and I'll pass them along rather than explain in detail how to do it. I'll let the experts do that. 

If you're here then you know what I mean by responsive web design, clearly a website that adapts to any device - tablet, smartphone, desktop, etc. After I discovered mine wasn't responsive I tried checking out my site through my own smartphone and was like, what? It was awful...looked like something from the 90s, 😂 dial-up days.

So here's what you need to do:

1. Add code to the meta viewport.
2. Add media queries to the CSS file.
3. Update your mobile settings, which are located in the Theme section of Blogger when you click the drop down menu for Customization.

This website, Infiblogger, was generous enough to provide instructions and code for doing so, but the guide was posted in 2016, so the instructions for locating the CSS file were outdated. I used this post from TechPostPlus, to find the CSS file, which are located in the Theme section as well. So I used the code from the first website and successfully completed step one and then used the media queries code from that same site along with the instructions from site two to add the code to the CSS file for step two. 

And thanks to both of these guides I ran a fix check from my Google Search Console to see if the problem was fixed and I passed! On top of that, while I waited for my results I checked my site from my smartphone and everything looked good - my site was responsive!! 

Once you visit the above sites the only tip I'll add is for when you're searching for the CSS file in Blogger. The guide is very helpful but just note that once in the Advanced section of the Customization section of Theme it's the little arrow next to "page" just below the word Advanced that you'll click on to find the CSS file option. 

I hope this helps!

With Love,

Carmen