[Resolved] Display broken on Apple devices since 1.10.0

[Louis]

Hi,

Since I upgraded to GP Premium 1.10.0, I am having problem with the display on iPad and iPhone.
BTW, I am also using the plugin “Generate Disable Mobile” 0.1. to get same display on mobile and desktop.

Please see the image below. The green vertical strip on the right side did not appear before upgrading to 1.10.0. It is doing so both in Safari and Google Chrome on Apple devices.

[Louis]

Dopbox link to image : https://www.dropbox.com/s/crr8od57ax69c07/IMG_0011.PNG?dl=0

[Tom]

Hi there,

Could be from that plugin – it’s super old. Instead, try this: https://generatepress.com/forums/topic/generate-disable-mobile-plugin-needs-to-be-updated/#post-398811

[Louis]

Hi Tom,

I did deactivate the plugin and added the code snippet.

It does work but.. some of the widgets I used on my home page (that are from Site Origin) do not fit anymore inside the width of the page.
It did increase the 1024 to 1105 but it is not working either.

See https://lelaurier.net/ both in Windows and iPad to see the difference (Fourth image is only showing partially) It was fine before when using the plugin (prior to 1.10.0).

BTW, have a look at this site : https://moncondo.online/
It is an upgraded copy of the other site. It does work fine with the “Generate Disable Mobile” plugin! Hope this can help you.

[Tom]

You may need to check with SiteOrigin about that. The viewport just makes it so the site acts like it’s that width regardless of the actual screen.

That section is using javascript to set their width it looks like (as it’s a carousel), so perhaps the javascript is getting confused by the forced viewport?

[Louis]

Tom,

SiteOrigin carousel works fine with the “Generate Disable Mobile” plugin sister site https://moncondo.online/. No problen there!

It also work fine in site https://lelaurier.net/ until I upgraded to GP Premium 1.10.0.
It seems that the “Generate Disable Mobile” does work fine.
The only problem is that “green vertical strip on the right side” since I upgraded.
See https://www.dropbox.com/s/crr8od57ax69c07/IMG_0011.PNG?dl=0

I did desactivate the code snippet and activate the “Generate Disable Mobile” plugin in site https://lelaurier.net/ for you to see the difference in Windows and iPad.

Thanks for having a look again at the problem.

[David]

Hi there,

i am seeing body overflow caused by a fixed width property. Try adding this CSS:

body .grid-container {
    width: auto !important;
}

[Louis]

David,

Adding that CSS did it.

You should look at what was change in 1.10.0 versus 1.9.1 that makes it necessary to add that CSS.

Would be nice to fix it in 1.10.0 so I could remove it enventually.

Thanks again David and Tom.

[David]

You’re welcome.
That CSS i provided corrects the CSS applied by the Generate Disable Mobile plugin.
Not sure why it never throw an error before – but there has been no change in 1.10 that would effects it behaviour…. weird one….

[Louis]

Thanks again!

[David]

🙂

[Author]

Posts