Making Maps Responsive?

Hi,

One solution is to just set the map width to a percentage, e.g. 100%, instead of a pixel value. But you can’t use a percentage height – you’ll just get a zero-height map – so the height will still need to be fixed.

Another approach is to set the map width=100% and height=100%, but place the map inside a <div> that has the dimensions you want. This should allow for media queries, etc.

I have some other ideas that might help – if you like, use the contact form on my site to contact me directly:

https://wphostreviews.com

I have managed to make the maps responsive like this:

<div style=”width:99%”>[mappress mapid=”52″ width=”100%”]</div>

Just in case someone still need this.

I added this in a JS instead of having it on post/page. Would just have to worry about adding width=100% to the mappress tag

jQuery(document).ready(function ($) {
	// For MapPress plugin
	// Tentatively add enclosing divs to make rendered map fluid on mobile browsers
	$('.mapp-layout').wrap('<div style="width: 99%" />');

});

First thing I checked after installing MapPress was responsiveness. Thanx for tips on getting maps to fit width-wise on mobile devices. I hope future updates of MapPress will address this. Sherwin which file needs your JS function?

>Mladen Gradev
Problem is resolved in your favor.
Thank you!

Glad I helped ??

Thanks Mladen! I actually made a new user account, just to thank you. Thanks a million once again!

Nice post and tips, thanks guys.

Agreed, thanks Mladen. I’ll mark this resolved.

thx MLaden