Blog Category thumbnails display wrong

Hello, @crefvik.

It’s just a style issue.

It seems these rules, which don’t belong to FIFU, are being applied to the external images:

.row .col img:not([srcset]) {
    width: auto;
}

When this would be correct:

.row .col img:not([srcset]) {
    width: 100%;
}

This is happening because, for some reason, the tags that have remote images don’t have the srcset attribute, but instead use data-nectar-img-srcset.

Example:

<img post-id="10616" fifu-featured="1" class="nectar-lazy wp-post-image skip-lazy loaded" alt="Resisting the Pressure to Overwork" title="Resisting the Pressure to Overwork" height="675" width="1200" data-nectar-img-srcset="" sizes="(min-width: 1600px) 20vw, (min-width: 1300px) 25vw, (min-width: 1000px) 33.3vw, (min-width: 690px) 50vw, 100vw" style="" src="https://i0.wp.com/hbr.org/resources/images/article_assets/2022/05/May22_26_77748655.jpg?w=1024&amp;resize=1024,1024&amp;ssl=1">

It seems the Nectar component, which appears to be a page builder from Salient, needs some adjustments to work with remote images.

If you’d like me to investigate, I would need Salient installed on my local site to reproduce the issue. If that’s a commercial product, unfortunately, you and I aren’t allowed to discuss it in this forum. In that case, you have two alternatives:

1. Access the FIFU website for support.
2. Contact Salient support. The issue can likely be resolved on their side.

You could also try adjusting the CSS yourself.
Something like this might work:

img[post-id][fifu-featured="1"] {
    width: 100% !important;
}

That CSS worked! Thank you!