WordPress.org

Ready to get started?Download WordPress

Forums

MapPress Easy Google Maps
[resolved] Making Maps Responsive? (11 posts)

  1. relish1227
    Member
    Posted 1 year ago #

    I love this plugin, but my maps don't resize as I need them to as the screensize gets smaller on my responsive design. Since the width is set inline, I can't override this using media queries. Any ideas/options?

    http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/

  2. chrisvrichardson
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. Mladen Gradev
    Member
    Posted 1 year ago #

    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.

  4. Sherwin Techico
    Member
    Posted 1 year ago #

    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%" />');
    
    });
  5. gordo019
    Member
    Posted 1 year ago #

    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?

  6. gokovacs
    Member
    Posted 1 year ago #

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

  7. Mladen Gradev
    Member
    Posted 1 year ago #

    Glad I helped :)

  8. Shreejee
    Member
    Posted 1 year ago #

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

  9. ylluminate
    Member
    Posted 1 year ago #

    Nice post and tips, thanks guys.

  10. relish1227
    Member
    Posted 1 year ago #

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

  11. danielgc
    Member
    Posted 1 year ago #

    thx MLaden

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic