New home › Forums › Pro Add-on › General queries › Mobile vs Desktop map scrolling
- This topic has 3 replies, 3 voices, and was last updated 2 years, 3 months ago by Steven.
-
AuthorPosts
-
October 16, 2020 at 5:52 pm #61162SuncastParticipant
Hi,
I have the map installed and using Open Street Maps. Greedy Gesture Handling is off. The trouble is when viewing on a smartphone, as I scroll down the webpage, when I get to the map it starts scrolling the map instead of the webpage. How can I keep that from happening? Changing Greedy Gesture Handling doesn’t help. I could make the map very short where it is easy to just touch below the map to keep scrolling, but that takes away from the user experience especially on the desktop. Is there a way to have different map heights on a mobile view vs a desktop view?The Pro Addon is installed.
The site in development is http://www.discoversullivan.com
Thanks!October 19, 2020 at 8:31 am #61166StevenModeratorHi there,
Thank you so much for getting in touch, we really appreciate your time.
Unfortunately, when getting to the map element, this will occur as the map is built to obviously scroll and pan and for dragging so unless taking this control away entirely, this will happen.
You can, however, target the map sizing only on mobile, however, using some custom CSS. Could I kindly ask you to navigate to -> Maps -> Settings -> Advanced -> Kindly copy the below custom CSS:
@media only screen and (max-width: 600px) {
.wpgmza_map {
height: 500px !important;
}
}Once copied, simply paste this within the custom CSS field and click save.
To adjust the map height, simply change the current 500px value to the required value of your choice.
Please let me know if this helps?
Kindest Regards,
Steven De BeerOctober 20, 2020 at 2:35 pm #61188SuncastParticipantThe CSS code you provided did the trick.
Thank you!
DavidJune 1, 2021 at 11:06 pm #69243tburchdesignParticipantIs there a way to have a different map zoom/center on mobile??
June 2, 2021 at 10:15 am #69252StevenModeratorHi @tburchdesign,
Thank you so much for getting back to us.
You could try something similar to the below custom Script:
jQuery(function($){ if( /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { jQuery(document.body).on("init.wpgmza", function (event) { var mobileZoom = 13; var mobileCenter = { lat: -33.8469759, lng: 150.3715249 }; WPGMZA.maps[0].setZoom(mobileZoom); WPGMZA.maps[0].setCenter(mobileCenter); }); } });
This after testing at my end locally does appear to target mobile displays and then does not target desktops.
I hope this helps?
Kindest Regards,
Steven De Beer -
AuthorPosts
- You must be logged in to reply to this topic.