Resonar: Theme CSS causes issues with Blog Posts block image size

[mikeicode]

The theme sets images to a smaller size which incorrectly affects the size of images within the Blog Posts block.

Steps to replicate

• Add a Blog Posts block to a page, set to Grid layout
• View the published page

Result

Images are too small, caused by the theme CSS:

Expected

Should be large like the editor.

• User report: 30667811-hc

Used this to resolve:

/* Blog Posts block images */

.wpnbha.is-grid .post-thumbnail {
    width: 100%;
}

[metabreakr]

I believe that I am experiencing a similar issue in 31213407-hc with the post carousel block:

Editor:

Rendered:

[aisajib]

I'm not 100% sure if it's the same, but the Post Carousel block also has image issues as reported here. See the screenshot from my test site.

Let me know if that sounds like a separate issue and I'm happy to open a new report.

[smithkyle45]

I came across the same issue described in the comment above, showing the issue in a post carousel block while Resonar is the active theme. 4895268-zen.

I provided the following CSS as a workaround:

/* correct image width in post carousels 4895268-zen */
.wp-block-newspack-blocks-carousel .post-thumbnail {
    width: 100%;
}

[Jaykame]

I came across the same issue in 8094730-zen.

When the Resonar theme is activated, the images in the Blog Posts block (and Query Loop) are resized to a smaller size, which makes them blurry on the desktop.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] https://wordpress.com/forums/topic/post-carousel-4
• [ ] 4895268-zen
• [ ] 8094730-zen