Posts on homepage in multiple columns


#1

Hi there,

is it possible to show the last 6 or 9 posts in three columns on my homepage? I tried several plugins, but I can’t seem to get it working?


#2

I’m sorry, my website is: http://www.theaircooledcollective.nl


#3

Hello,

It would be possible with some CSS. But you would first need to switch your blog layout to the large images option from the Customizer, otherwise it would just look bad.


#4

Okay, I found that option to switch to large images.

Do you have some examples of which CSS I should use?

And in which php-file do I have to make the extra DIV’s (for example something like three columns with “width: 33%”)?

Thanks in advance!


#5

You don’t need to edit php files and add extra divs.

Use this in a custom CSS plugin please:


@media (min-width: 1199px) {
.blog .hentry:nth-of-type(1),
.blog .hentry:nth-of-type(2),
.blog .hentry:nth-of-type(3),
.blog .hentry:nth-of-type(4),
.blog .hentry:nth-of-type(5),
.blog .hentry:nth-of-type(6) {
     width: 30%;
     float: left;
}
.blog .hentry:nth-of-type(1),
.blog .hentry:nth-of-type(2),
.blog .hentry:nth-of-type(4),
.blog .hentry:nth-of-type(5) {
    margin-right: 5%;
}
.blog .hentry:nth-of-type(4) {
    clear: left;
}
}

This will set the first six posts in three columns on large screens (above 1199px). I haven’t tested it so it might not work perfectly. Let me know if there’s anything wrong with it.


#6

Hero of the Day! Seems to work perfectly, thanks!!!


#7

Cool.
Just a suggestion: you can remove the max-height you added to .entry-thumb img and do it like this so you crop your image instead of deforming it:


.entry-thumb {
   max-height: 150px;
   overflow: hidden;
}