That was not too long ago when Blogger introduced 4 new and modern themes for its users. These themes are Soho, Cotempo, Notable and Emporio.
All these themes are responsive and can be customised to your liking.
Finally, Blogger users can have a responsive blog which is necessary to increase mobile usability and also good for SEO.
These themes have ended the need of finding a custom template (of many bloggers) which was a headache.
Emporio theme was most suitable for my blog. So I applied it.
But there is a bug in the Emporio Theme, which I did not find out until I uploaded InfoSmush logo.
The problem was: logo looked too big.
Logo stretched to cover the whole header part.
This was a major problem because I had a logo for InfoSmush before I decided to apply the Emporio theme. I had to find a way to change the size of my logo. So I took the help of Google
But sadly, after hours of searching, I didn’t find any solution. This forced me to come up with my own way out of this mess.
And after a little poking around I found a permanent solution and thought I should share with other bloggers like you.
Follow these steps to change the size of your logo:
First upload your logo (when you change your theme, your logo is removed).
1. Select “ Instead of title and description”.
If you choose the first option which is “Behind title and description” and make your blog’s title transparent, your logo might look good on a laptop but not on mobile screen. Your logo won’t be responsive.
If you choose “Have a description placed after the image/logo” there will be no Text heading in the header bar.
So select the 2nd option and hit Save.
2. Next step is to edit your theme, for this go to Theme>Edit HTML.
On the next page you will see a box with codes. Click anywhere in the box> Press Ctrl+F. This will open a search bar in the top right corner. In the search bar copy and paste “header-image” (without the inverted comma) and Hit ENTER.
Now scroll down a bit and find the codes in the rectangle as shown in the screenshot:
Now we need to change “max-width: 100%”. Logo covers the whole header part because it is set to 100%.
Change the max width percent according to your logo.
In my case, I have changed the max width to 60%. Because if I set it lower than that, it will look too small on mobile.
I tried this trick on Emporio theme, so I’m not sure whether it will work with other themes or not. But you can definitely try.
Don’t go messing around with the HTML codings.
It may corrupt your theme! And sometimes it is so badly damaged that nothing can fix it.
My theme got corrupted too.
I tried everything to correct it, but nothing worked. In the end, I had to transfer all my posts to the other blog and delete the old one. Believe me, you don’t want to go through all that hassle.
Share this post to help other bloggers.
If you have any question ask me via comment.