logo appears big then small on mobile

Hi there,

I tested on my iPhone using Chrome and Safari, didn't see the issue.

Can you try clearing your browser cache to test?

Let me know :)

Hi Ying,

It's happening in Dev tools. I've attached a video.

Hi there,
.
I would recommend don't serve that image as a webP - its doing what you had an issue with on your other images, by loading a <picture> element first that is later injected with the image.

Hi David,

I think that did work.

But something else I see is that my featured image seems to flicker. It loads fine, then disappears for a brief second then comes back. This happens when I have imagify insert the webp pictures but also if I turn the serve webp option off.So even when the png is served only, it still seems to flicker.

Do you have any ideas what this may be down to?

So now i see the img that is being loaded by WP Rocket CDN. I think the issue is the image is getting loaded before the CSS that constrains it. Edit your Customizer > Layout > Primary Navigation and change the Menu Item height for Mobile to 60px. See if that helps

I've made the changes. So it should be ok to load the logo webp now?

This doesn't fix the featured image issue though, right?

Might be fine to use the webP - only one way to find out :)

Regarding the featured image - you would need to check with Imagify - not sure what its doing there

Ok thanks David for your help once again. I'll send them a message.

Thanks!

You're welcome