Causes display problems on mobile devices

I’ve noticed that if you set the width of the map to be fairly wide, like 640 for example, the blog post won’t display correctly on mobile devices like the iPhone. This is because the div that contains the map (id=”map”) is set to a width of “640px”, and the iPhone isn’t that wide. The browser reserves 640 pixels anyway though, and the whole blog post is squished into the left half of the screen.

I think the solution is to somehow use percentages instead of pixels, but I’m not sure how to do the height that way (a truly “responsive” web design is what’s really needed, but that’s beyond me). Another option might be to dynamically set the width and height according to the device’s display capabilities.

I decided to just hide the map link entirely when the screen width is less than 640 pixels. To do that, edit your stylesheet and add the following to the bottom:

/* Hide geolocation link and map on devices less than 640 pixels wide */
@media screen and (max-width:639px;) {
.geolocation-link, .geolocation-map {
display: none;
}
}

Russell

https://www.ads-software.com/extend/plugins/geolocation/