Feature Image – Desktop versus Mobile

[craigkeefner]

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

[Themonic-Support]

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.

[craigkeefner]

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

[craigkeefner]

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

[Author]

Posts