[Resolved] Fratured Image Size Problem

Home Forums Support [Resolved] Fratured Image Size Problem

Home Forums Support Fratured Image Size Problem

  • This topic has 5 replies, 3 voices, and was last updated 2 weeks ago by Ying.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1961662
    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.

    #1961676
    Elvin
    Staff
    Customer Support

    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 wise man once said:
    "Have you cleared your cache?"

    #1962014
    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;
    }
    }

    #1962514
    Ying
    Staff
    Customer Support

    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.

    #1962730
    A. R. Choudhury

    Thanks, Ying. I got my answer. GP Support rocks always.๐Ÿ˜€

    #1962795
    Ying
    Staff
    Customer Support

    Good to hear that ๐Ÿ™‚

    You are welcome!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.