Mobile image size not correct / too big

[leo01]

Dear Laytheme Team,

I have an issue with my website. i have the feeling the site is not serving the small image versions for mobile and google pagespeed got lower for that.

Could you check if its ok?
www.leopoldfiala.com

I was working on the pagespeed quite a lot recently but i dont seem to get rid of the "Properly size images" issue.

Via inspect and also via pagespeed insights it looks it provides images with a with over 1600px with on a mobile. Maybe i did oversee a setting in the backend?

Best
Le0

[leo01]

Also i encounted another issue.
The full screen cover image does not show on mobile devices (iOS and Android)
eg.: https://www.leopoldfiala.com/neonoir/

Actually it does not show on Desktop as well. Very strange!

Any idea how to fix that?

Best
Leo

Cover shows on mobile and is not visible on desktop (the cover text is visible though)

[Richard]

Dear Leo

@leo01

Cool website!, could you please confirm the following before other debugging:

Wordpress, Lay Theme & Laytheme's Addons are all up to date ?

Any custom CSS or JS that may interfere is temporarily removed.

Any third-party plugins are de-activated to see if this resolves the issue.

If using a WordPress Cache plugin, disable it or clear your cache.

If your WordPress Dashboard shows a warning "PHP Update required”
 Please update your PHP version in your webhost control panel.

Possibly your website is running PHP 8.0 this has been known in some cases to cause issue.

---

Talk soon Leo and have a great day 🌻

Richard

[leo01]

THANKS!

@Richard said in Mobile image size not correct / too big:

Dear Leo

@leo01

Cool website!, could you please confirm the following before other debugging:

Wordpress, Lay Theme & Laytheme's Addons are all up to date ?

JES

Any custom CSS or JS that may interfere is temporarily removed.

No but it worked before. I do have some custom css in the laytheme options

Any third-party plugins are de-activated to see if this resolves the issue.

Not many active, just realised the issue comes from Imagify. It serves WEP images for the website

This setting causes the error:

If i switch it to rewirite it works.
Can you recommend that setting.

If using a WordPress Cache plugin, disable it or clear your cache.

Done before checking

If your WordPress Dashboard shows a warning "PHP Update required”
 Please update your PHP version in your webhost control panel.

Possibly your website is running PHP 8.0 this has been known in some cases to cause issue.

---

Talk soon Leo and have a great day 🌻

Richard

Best
Leo

[leo01]

Actually i realized that the cover option is still not disabled on mobile. but i did check that setting in laythme settings. Cover options > Disable Cover for phone.

But it still shows.
would be great to disable that.

Best
Leo

[Richard]

Dear Leo

@leo01

Thanks for the above info, great to know and happy you solved one of the issues.
Regarding the 'Cover' Still visible on Mobile, can we test in an Ingocnito window to make sure it's not your Browsers Cache & also test on a true mobile device to make sure it's not the use of a Desktop or Laptop (but in Mobile width) that is triggering the Cover response.

---

Best wishes Leo! 🌞

Richard

[leo01]

Hey.

Yes cover is visible on a real mobile as well :(

Best
Leo

[Richard]

Dear Leo

@leo01

Thanks for testing. Unsure why you are having issue, due to exact setup, but we can easily disable the Cover region manually if you want to.

The following code can be added into > Lay Options > Custom CSS & HTML >
If you want the cover to only be disabled for Mobile then add the code into the "Mobile CSS" area or if you want it disabled for both Desktop and Mobile then just add it to "Custom CSS" Area.

.cover-region {
    display:none;
}

---

Talk soon Leo and let me know how you go! 🌝

Richard

[leo01]

@Richard said in Mobile image size not correct / too big:

.cover-region {
display:none;
}

Thanks Richard.
Very stange i added the code in the css mobile field. Purged cache and minify Cache and still the same - cover shows on mobile (iphone in incognito mode) image url)

[Richard]

Dear @leo01

Sorry that my initial code didn't work. Here when testing on Mobile within a Browser it's fine:

But within a Mobile Simulator (& true mobile device) its not:

Could you please also add the following code in the Mobile CSS Area & let me know how you go:

.first-row {
display:none;
}

---

Talk soon Leo, once again sorry that it was correct the first time 🌻

Richard

[leo01]

Hi.

I deleted the first Mobile css aoption and replced it.

Still the same problem.
In Iphone 11 at least.

Clearecd Cache and all after changing as well

This is all the CSS i have in the Mobnile css section:

.thumb .titlewrap-on-image.on-image.lay-textformat-parent .title {
font-size: 22px;
}

.first-row {
display:none;
}

Best
Leo

[leo01]

@Richard
You still here?

Best
Leo

[Richard]

Dear Leo

@leo01

I am here 🌻sorry for delay - I have sent you a message via 'Chats' & hope to talks soon, have a wonderful weekend and best wishes

Richard

[Richard]

Dear Leo

@leo01

You have a number of Third-party plugins installed. This is likely the cause of issue. Problems with Jetpack and Yoast SEO are known, also a large stored Cache.

After de-activating to test, I see on Mobile devices the "cover-region" is working as it should - 'Not Visible' as set within > Lay Options > Cover Options.

Here testing on a true mobile device (this is the first row of your layout and not the "cover-region"):

---

Hope this helps & best wishes ✨

Richard

[leo01]

? Im sorry but the screenshot shows the cover that should be hidden.
That is the cover (row) image with the text.

Maybe we talk different subjects?

[Richard]

Dear Leo

@leo01

Sorry but there may be a mis-understanding. The Cover is the first row.

https://laytheme.com/documentation.html#covers

If you do not want this image on mobile you can just delete the row?

---

Originally i thought the issue was "Cover is disabled for phone"

Was applied but the cover behaviour was still there. Now everything is working fine no? the ROW exists but the cover behaviour does not.

" The cover will disappear underneath your content when you scroll down. A Cover is always browser filling."

---

Happy to help however i can Leo and reach a solution that you want.

Best wishes ✨
Richard