[Resolved] Fratured Image Size Problem

[A. R. Choudhury]

Hello, in my blog the featured image in archive pages are sized in wrong way in mobile. But in single post it looks great.

Look: https://drive.google.com/file/d/1ZWmO-m-eXLReiYGxKXnQjQjdGj66F3BJ/view?usp=drivesdk

Website link: nutritioncrown.com

Please help.

[Elvin]

Hi there,

The google drive link you’ve shared can’t be viewed. Can you changes its permission to public?

I’m not exactly sure what you mean but are you pertaining to the image cropping that happens on mobile?

If so, it’s because you have this CSS on your site with effectively crops the image on mobile.

.resize-featured-image .post-image img {
    width: 740px;
    height: 350px;
    -o-object-fit: cover;
    object-fit: cover;
}

Try changing it to this:

@media (min-width:769px){
.resize-featured-image .post-image img {
    width: 740px;
    height: 350px;
    -o-object-fit: cover;
    object-fit: cover;
}
}

@media (max-width:768px){
.resize-featured-image .post-image img {
    width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
}
}

[A. R. Choudhury]

*Sorry previously I was on Mobile.

Thank you. After applying your code, it looks great. But I have added the CSS in customizer and I don’t know how to change the previous code to the new one.

Currently, for featured image, the CSS in my customizer is the following:

.featured-image amp-img {
height: auto;
}

@media (min-width:769px){
.resize-featured-image .post-image img {
width: 740px;
height: 350px;
-o-object-fit: cover;
object-fit: cover;
}
}

@media (max-width:768px){
.resize-featured-image .post-image img {
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
}

[Ying]

Hi there,

Not sure what you mean, the CSS looks right, you’ve replaced the one with Elvin’s CSS correctly.

Are you asking about this CSS?

.featured-image amp-img {
    height: auto;
}

It seems to keep the featured image aspect ration for single post page.

Let me know if I miss anything.

[A. R. Choudhury]

Thanks, Ying. I got my answer. GP Support rocks always.😀

[Ying]

Good to hear that 🙂

You are welcome!

[Author]

Posts