Sometimes, OMG is the only expression left to say. As today when I played around and found out that with basically only 2 lines of CSS the DIVI blog- and archive pages can be changed from one-column standard (which I didn’t like because it consumes a lot of space and the big images crush heavily on the few lines of excerpts) into a two-column or multi-colum display.
And here is all that was needed:
|
1 2 3 4 |
@media ( min-width: 767px ) { .archive article.et_pb_post, .blog article.et_pb_post {float: left; width: 45%; margin-right: 5%;} .archive article.et_pb_post:nth-of-type(2n+3), .blog article.et_pb_post:nth-of-type(2n+3) {clear: both;} } |
How does it work?
A look into the source code of the single posts on blog- and archive pages revealed that they come very nicely wrapped into article tags. So all that had to be done was to let them float and to change their width down to 45% with a 5% margin to the right so they don’t stick at each other.
The only difficulty that appeared was that a clear:float was needed after each row, so the entries stay nicely aligned and don’t edge out each other. Looked like a heavy intervention was needed, but nth-of-type made it a piece of cake, applying the clear:float to every second instance (2n) starting with the third one (+3). Wow, CSS can be such an amazing joy sometimes.
Wrapped in the media-query, this two-column view applies to screens above 767px only, automatically falling back into the one-column standard in small resolutions.
Responsiveness
From here it can be developed further into a responsive three- > two- > one-column display, which I found a bit too squeezed for blog- and archive-pages, but for image galleries this technique will be very valuable. This could be the code enhanced into responsiveness:
|
1 2 3 4 5 6 7 8 |
@media ( min-width: 767px ) and ( max-width: 1100px ) { .archive article.et_pb_post, .blog article.et_pb_post {float: left; width: 45%; margin-right: 5%;} .archive article.et_pb_post:nth-of-type(2n+3), .blog article.et_pb_post:nth-of-type(2n+3) {clear: both;} } @media ( min-width: 1101px ) { .archive article.et_pb_post, .blog article.et_pb_post {float: left; width: 31%; margin-right: 2%;} .archive article.et_pb_post:nth-of-type(3n+4), .blog article.et_pb_post:nth-of-type(3n+4) {clear: both;} } |
Optimizing the image size
Since the use of the 1080 pixel wide version would be a waste of ressources, we can use a smaller thumbnail version instead. In index.php (preferably a copy in your child-theme), line 17, change:
|
1 2 |
$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 ); $height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 ); |
into for example:
|
1 2 |
$width = (int) apply_filters( 'et_pb_index_blog_image_width', 400 ); $height = (int) apply_filters( 'et_pb_index_blog_image_height', 250 ); |
to use the 400×250 version that DIVI automatically generates.
Enjoy your new (responsive) multi-column blog- and archivepages and let me know in the comments if you have additions or questions.
Great technique. I don’t like the masonry layout and this solves the issue of having smaller items without the masonry layout!