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:
http://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!
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.
