Prevent text flowing under image in Blogger mobile templates homepage

I currently still use a variation of Blogger's "Awesome Inc" template. If you use one of these slightly older themes too, you may notice that the post summaries on your blog's mobile version tend to have the text bleed under the image. It looks a bit ugly.

You probably want the text to stay to the right of the image, as in these before and after shots:

Blogger mobile index, default text overflow (above) and modified version (below)

There are a few different ways of fixing this, but I like this one. Just paste the following code into your blog's theme editor (Theme → Customize → Advanced → Add CSS).

.mobile-index-contents .post-body {display: table-row;}

That's it.

Comments