[Resolved] Images in archives

[DIGITAL]

I have an issue on my site: https://www.soldisulweb.com . Some featured images in the archive page are smaller with rounded borders while others are rectangular and bigger. All the featured images uploaded have the same sizes.

You can see the problem in this url : https://www.soldisulweb.com/freelance/ The first 15 posts they have a rounded image while last 5 ones have a rectangular and bigger featured image.

Another example: https://www.soldisulweb.com/crypto/

[Ying]

Hi there,

It’s because some of the images are optimized by an image optimization plugin, and the plugin changes the HTML structure of the image, which results below CSS doesn’t work for those images.

Solution:

Go to customizer > additional CSS, and find this CSS:

.category .dynamic-content-template img.dynamic-featured-image, .author .dynamic-content-template img.dynamic-featured-image, .blog .dynamic-content-template img.dynamic-featured-image {
    width: 100%;
    height: 170px;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

Replace it with this:

:is(.archive,.blog) .dynamic-content-template :is(.dynamic-featured-image, img) {
    width: 100%;
    height: 170px;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

[DIGITAL]

Thank you. Resolved

[Ying]

No Problem 🙂

[Author]

Posts