Display my posts thumbnails on "2 columns" on home page and sub pages
-
Hello,
The current display of my posts on my home page of sub menu pages is horrible.
On every page, I would like the posts thumbnails to be displayed on 2 columns.
How can I do this?Is it related to the image size? What would be your advice regarding this?
Thanks a lot
The blog I need help with is: (visible only to logged in users)
-
By two columns, you mean the image on the left, and the text on the right, like on this page, correct?
https://blog.mytutorspeaksfrench.com/category/je-suis-parent/apprendre-je-suis-parent/If so, we’ll make a small adjustment to this style in your custom CSS:
.blog .post.tag-fr { display: block; }Change the block to flex and you’ll be good to go :)
-
Hello,
Sorry I’ve not been very explicit.
I’m fine with the texte, below the featured image.
I would like to see 2 posts per row, giving the impression of 2 columns of posts.
Am I clearer? Tell me otherwise
Thanks -
That’s clear, thank you :)
Setting up those kinds of columns won’t work very well on a theme like Maxwell that wasn’t designed with a grid layout. In order for the posts to align that way, they all need to be the exact same height, or you end up with a lot of gaps and empty spaces.
You can try this CSS:
@media screen and ( min-width: 640px) { body:not(.single) .post { width: 40%; margin: 0 5%; float: left; min-height: 525px; display: block; } .post-wrapper .has-post-thumbnail .post-image, .post-wrapper .has-post-thumbnail .post-content { width: 100%; } }On some screen sizes, due to the length of some of your post excerpts on the home page, you’ll notice some of the gaps I mentioned.
Grids are tricky :) Generally it’s best to select a theme that has one built in. Some of the themes on that link use grids for different things, so if you decide to check any of them out, look at the blog and category pages of the demo site to make sure you like the way those look!
-
Thank you very much.
I’m desappointed because I got misleaded by the Maxwell example which displays 3 posts in a row, so I thought the feature was kind of included.
Anyway, thanks a lot but now I put the above code, the following code doesn’t work anymore
.blog .post.tag-fr {
display: block;
}It’s the one which only displays my French posts (tagged with FR) on my home page.
Would you have a trick to make it work again?Also, I’ve noticed some gaps but aren’t due to the sizes of my featured images?
Would you have a size recommendation or any other to harmonize the display?Thank you :-)
-
I’m desappointed because I got misleaded by the Maxwell example which displays 3 posts in a row, so I thought the feature was kind of included.
That feature is included, but it isn’t a set of columns like what you’ve described. That is a single row of featured posts.
Take a look at the Maxwell support page – it explains now to set that up. :)
Anyway, thanks a lot but now I put the above code, the following code doesn’t work anymore
.blog .post.tag-fr {
display: block;
}Yep, I see the conflict that causes on your home page now. The category pages were a little different, so I had to use a display: block to get them to convert to columns.
Here’s a revised version of the CSS from my last post:
@media screen and ( min-width: 640px) { body:not(.single) .post { width: 40%; margin: 0 5%; float: left; min-height: 525px; } .archive .post{ display: block; } .post-wrapper .has-post-thumbnail .post-image, .post-wrapper .has-post-thumbnail .post-content { width: 100%; } }That moves the display setting to it’s own, more specific style.
Also, I’ve noticed some gaps but aren’t due to the sizes of my featured images?
Would you have a size recommendation or any other to harmonize the display?The gaps in your columns will actually have less to do with the size of the images than with the length of the text that’s displayed.
In the above CSS, this line:
min-height: 525px;sets the minimum height of each post in the grid. If one of your posts becomes taller than that (longer text) then it will disrupt the next row.
There are two possible solutions:
– shorten the text that’s making the post too long
– increase that 525 number. This will also increase the spacing below you shorter posts. -
Thank you so much for the new code :-)
I still have an overall display issue on my blog… and I don’t understand how I could improve it…
I really have the feeling that the image size matters because when I look at this page, the first row looks great:
https://blog.mytutorspeaksfrench.com/category/je-suis-eleve/interview-de-prof-je-suis-eleve/
I do like the display of the first row. It’s what I would like to acheive.Both featured images appear to be the same size (maybe they aren’t actually in the media library, I don’t know).
And even though the posts titles and texts display doesn’t have exactly the same lenght (or number of lines), they look like they “end” on the same bottom line.I don’t know how I could repeat this display…
I don’t understand why sometines I have 6 lines (adding post title+text) displayed for a post thumbnail and why it’s 8 lines sometines.
Would have a trick in your bag?
-
The theme shows the first 20 words of your post – if it’s 20 short words, you might get 4 lines. 20 long words you might get eight. Or it could be somwhere in the middle.
This is part of what I meant initially when I mentioned converting a non-grid theme into a gridlike layout being an issue. It isn’t designed to have perfectly aligned column blocks, so we can only get so close when modifying it.
You could hide the text all together, and show only images and titles, then they’d be more likely to be the same size (but again, not always, since some titles are longer than others.
For a truly grid, with each item aligning exactly with the one next to it, you’d really need to start with a theme that was built that way :)
-
-
- The topic ‘Display my posts thumbnails on "2 columns" on home page and sub pages’ is closed to new replies.
WordPress.com Forums 