Feature Image – Desktop versus Mobile

Home Forums Iconic One Pro Support Feature Image – Desktop versus Mobile

This topic contains 3 replies, has 2 voices, and was last updated by  craigkeefner 3 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #6393

    craigkeefner
    Participant

    I have my feature images sized to 658×300, and regenerated thumbnails.

    They look fine on desktop browser but they show “squared” and thus stretched on my Pixel 4a under any browsers. Is there a solution for this.

    Also when I search the site, the results are again fine in desktop. On my mobile any images outside the recommended feature size cause the content to be reduced in the view.

    For reference it looks like the search bar at the top for mobile only works in Classic. Doesn’t work when I disable Breadcrumbs

    #6394

    The image issues on your site is due to webp conversion/plugins as it alters the HTML and theme defined functions are not applied.

    Kindly provide login details via email([email protected]) for further inspection and solution.

    We will check out the mobile Search bar shortly and get back to you.

    #6395

    craigkeefner
    Participant

    The caching program is WP-Rocket and it uses Imagify.io

    Maybe I turn it off? see email

    Craig

    WebP compatibility
    NEED HELP?
    Enable this option if you would like WP Rocket to serve WebP images to compatible browsers. Please note that WP Rocket cannot create WebP images for you. To create WebP images we recommend Imagify. More info

    You are using Imagify to serve WebP images so you do not need to enable this option. If you prefer to have WP Rocket serve WebP for you instead, please disable them from serving in Imagify. More info

    #6396

    craigkeefner
    Participant

    The additional CSS fixed the “problem”. Thanks for looking at it!

    picture img {
    max-width: 100%;
    height: auto;
    }
    @media screen and (min-width: 767px) {
    picture img {
    margin-right: 20px;
    }
    }
    @media screen and (max-width: 620px) {
    .search .site {
    padding: 24px;
    }
    }

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.