Maps Not Appearing in Mobile Devices

4 replies · opened Mar 17, 2023

SsansabarMar 17, 2023

I recently upgraded and moved over to v7 of Canvas.
After uploading the files to the server everything seems to be working correctly EXCEPT the Gmap is not displaying on mobile devices on a simple one page site.
I have tried it on the Safari, Firefox, and Edge mobile browsers without any luck.
Is there something additional I need to be doing? I didn't have this problem in the previous versions of Canvas.
Thanks.

SSemicolon WebSTAFFMar 17, 2023

Hello,

Even the Older Version of Canvas didn't show the Maps on One Page Demos on Mobile Devices. This is because there is Display Utility Class, that is hiding the Map on Mobile Devices. Simply delete the d-none d-md-block Classes from the DIV that holds the Google Maps and this will be automatically resolved.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsansabarMar 20, 2023

Thank you.
Removing the d-none d-md-block classes from the containing div allowed the map to show on mobile devices - BUT - it only shows a small strip of the map. How can I correct this? Thanks.

SSemicolon WebSTAFFMar 20, 2023

Hello,

You can simply set a Height Utility class to the .gmap Element. Eg: .min-vh-50, Or you can setup a Custom Height in CSS for the .gmap DIV on Mobile Device.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsansabarMar 20, 2023

Thank you - that was the solution I needed.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard