When using the post loop builder for any blog items (see bottom of home page or the blog page), the background images are blurred and pixelated even if I upload a large featured image. From what I could find in the code it is being caused by a hard-coded statement on the image CSS: sizes="(max-width: 300px) 100vw, 300px"

If I remove the (max-width: 300px) in a code inspector, the bg image shows correctly without being blurred or pixelated.

I have no idea where this is being added - any help is appreciated.

The HTML I'm referencing is:

<div class="nectar-post-grid-item-bg-wrap">
<div class="nectar-post-grid-item-bg-wrap-inner">
<div class="nectar-post-grid-item-bg img-loaded">
<img decoding="async" class="nectar-lazy skip-lazy loaded" src="https://kephart.com/wp-content/uploads/2024/11/Untitled-300x171.png" alt="" height="600" width="1050" sizes="(max-width: 300px) 100vw, 300px" srcset="https://kephart.com/wp-content/uploads/2024/11/Untitled-300x171.png 300w, https://kephart.com/wp-content/uploads/2024/11/Untitled-1024x585.png 1024w, https://kephart.com/wp-content/uploads/2024/11/Untitled-150x86.png 150w, https://kephart.com/wp-content/uploads/2024/11/Untitled-768x439.png 768w, https://kephart.com/wp-content/uploads/2024/11/Untitled.png 1050w">
</div>
</div>
</div>

I totally missed that option! That worked. I'll be more aware of the intricacies of that module in the future.

I appreciate the help - love the theme!!

Thank you!

The Blog Page still has the same issue because it uses the legacy Blog Post module, not the Post Loop. Can the image sizes be changed on this one?

https://kephart.com/keep-up/

While I can't mimic the same layout the legacy module provided, I got it close enough for the client. Thanks and consider this one closed - Thank you!!