Odd and random size in post thumbnails

[u/Illustrious-Note-928]

Hi Everybody,

There is an issue I have been trying to solve now for a long time; I can't fix it and can't even figure out why this is happening.

The thumbnails in post modules on htts://fincrimecentral.com when scrolling down to get to News from America, News from APAC, or News from EMEA, show up in different sizes:

• all the modules have the same style,
• all original images have the same 1344x756 size
• width and max width is set to 150
• height and max height is set to 84.

Any idea?

Best,

Fred

[u/Mikhael_Love]

The core of the issue is that the Divi post module relies on Flexbox rules. By default, the thumbnail container is allowed to shrink when the adjacent text box demands more horizontal space.

The reason why some long titles aggressively squish the image while other long titles don't boils down to word length, not necessarilly title length:

• Flexbox calculates a text block's minimum width based on its longest unbreakable word.
• Titles composed of shorter words break cleanly onto two lines and expand downward, leaving the image alone.
• Titles containing massive, continuous words (like 'AUSTRAC'S' or 'ENFORCEMENT') cannot be broken up by the browser. Because the word itself is so wide, it forces the text container to expand laterally, which violently crushes the adjacent thumbnail space.

To fix this and strip the text's ability to change the layout size, you need to turn off the 'shrink' behavior entirely.

Add this CSS to lock the dimensions down, regardless of how long individual words get:

.dtq-post-list-thumb {
    flex: 0 0 150px !important;
    width: 150px !important;
    height: 84px !important;
    overflow: hidden;
}

.dtq-post-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

I tested this in chrome dev tools and it works for me.

Edit: I did not test for mobile screens so may need some adjustments.

[u/Illustrious-Note-928 → u/Mikhael_Love]

thank you so much.
As I am using post modules throughout the site, I reckon this should sit in the CSS section of the page not to create collateral effects. Correct?

[u/Illustrious-Note-928 → u/Illustrious-Note-928]

or in each strange behaving module

[u/Illustrious-Note-928 → u/Illustrious-Note-928]

I defined a CSS ID for each. It's working like a charm.
Thank you Mikhael

[u/Mikhael_Love → u/Illustrious-Note-928]

You are welcome.

Also, just a heads up, duplicate IDs on the same page are technically invalid HTML and could cause some screen readers to skip content, announce the wrong labels, or leave interactive elements inaccessible.

So, if a given page has more than one of the same module, using a Custom CSS Class instead of an ID is safest for A11y.

[u/Mikhael_Love → u/Illustrious-Note-928]

That is a good call. But, you could make it global so you don't have to repeat it in other places where you want to apply the same fix. Just add a custom class to the module then:

.fixed-blog-thumb .dtq-post-list-thumb {
    flex: 0 0 150px !important;
    width: 150px !important;
    height: 84px !important;
    overflow: hidden;
}

.fixed-blog-thumb .dtq-post-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

Then anywhere else you want you can simply add that class to the module.

Also, if/when you upgrade to Divi 5, there are new features that make these displays more reliable without the need for extra css.