Making Joomla blog layout display in individual rows

Have you ever set up a blog category in your Joomla install only to have the blog page layout look a little, well... wonky? The blog layout is a great way to display multiple articles on the one page as blogs can be a really effective SEO tool for your website, but if the layout isn’t up to scratch, people are likely to not read through your content and click to a competitors website.

Why your blog page layout isn’t displaying properly

We’ve found that most of the time if your blog layout isn’t displaying properly on your Joomla website, it’s most likely because you have images in the introductions of your blog posts. This will throw out the layout of your page, particularly if you’re using the read more feature on your blog entries.

This can be alleviated by simply adding a banner type image that spans across the whole page, but sometimes this doesn’t work or clients want a particular look and feel to their blogs.

Luckily we’ve found a really simple way to have your blog entries be laid out in rows evenly down the page.

Add this line of code to your custom css file (this could be template.css, custom.css your_template_name.css or even custom.scss, depending on how your template has been built)

div[itemprop="blogPost"]{display: table-row;}

A simple and elegant solution to a problem that many Joomla blog pages have.