I wanted to say mahalo to TAloha for the updated CSS. It seems to have fixed all of my three column display issues. (P.S. I am also on Maui.)

I think you could probably manage this with flexbox using justify-content: center but would require a lot of modification. Here is more info on flexbox – https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout. If you need help with this layout, please create a support ticket and we would be happy to send you the custom CSS for this.

Thanks Taloha! Yeah, when displaying a large number of posts there can be some conflicts at certain posts in the grid. It’s really strange b/c it seems to be different posts for different sites. I’m not seeing any issues on the 13th item but am on the 61st item. I think for most people the original code will work, but I did add the disclaimer that grids displaying a large number of posts might have issues. And provided example code on how you can target a specific item in the grid. Thanks again!

Never mind — I think I figured it out! It appeared to be due to the 13th item being a common denominator of (3n+1) and (4n+1). This seemed to fix the issue:

.three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset!important; /* clears the 4 column grid settings */
}
.three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: both!important; /* then overrides it with the 3 column grid settings */
}

Hi Brad & Patrick,

We are seeing the same issue on one of our sites, but it’s the 13th product that is throwing off the layout. It was working before, but I’m guessing a recent Divi update changed something…

Were you guys able to figure out how to resolve the issue?

Here’s the page where it’s happening for us:
https://mauifoodbank.org/events/

Thanks!

Hi Christina! I responded to your email. This is happening on your site b/c you’ve removed the space between each image and you’re using a fullwidth row. So the images take up a lot of space, but they are only 400 x 284 thumbnails so they appear pixelated. If you’re using our plugin, you can simply change the thumbnail size from within the module settings to load a larger thumbnail. If you’re using the default portfolio module that comes with Divi, you’ll need to add code to your functions.php file to change the size of the thumbnail – http://www.eleganttweaks.com/divi/changing-portfolio-blog-module-thumbnail-sizes/

The images are very big, from a photograph.

Why its happens? How can I send you the link to the web?
Thanks

That is very strange Patrick. Can you share the URL you’re seeing this issue? You can send it via our contact form if you prefer to not share in comments and we would be happy to take a look.

The layout issue is partial impacted by a private product. Without the private product, I still have the layout issue at item 73. Weird.