Support » Plugin: Events Manager - OpenStreetMaps » Responsive Map

  • Resolved Dirk

    (@dirkhag)


    The map doesn’t autofit to mobile screens. How can I change this?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Stonehenge Creations

    (@duisterdenhaag)

    With pure css.

    I have left out styling on purpose, because every website lay-out is different and every webdesigner’s wishes are different. 😉

    All maps have been wrapped in a non-styled div so that you can easily target it yourself. Use .em-osm-container{} and media queries to style it to your personal liking.
    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    To read how to add custom CSS, read this:
    https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

    Dirk

    (@dirkhag)

    Great, thank you. I’ll try this.

    Dirk

    (@dirkhag)

    Whatever I do for a Single Event Site using #_LOCATIONMAP – Shortcode, I do not get it correctly fitted. I’ve tried all kind of CSS but nothing works. I think the reason is more within Events Manager itself.

    Plugin Author Stonehenge Creations

    (@duisterdenhaag)

    No, you are probably doing it wrong.
    WHERE are you adding the additional css?

    Also, when using this plugin, EM does absolutely nothing with the maps any more.

    Dirk

    (@dirkhag)

    I put it in custom css plugin…I have some other CSS-Tweaks within Custom CSS. In theory I know how to do it. But in this case, it does not work.

    @media screen and (max-width: 480px) {
    
    	.em-osm-container {
    		max-width:90%;
    }
    }
    Dirk

    (@dirkhag)

    You can see here, how it looks like on my mobilephone:

    Screenshot

    Plugin Author Stonehenge Creations

    (@duisterdenhaag)

    A screenshot does not say much, because you cannot look into the actual outputted source file….

    I added this:

    @media screen and (max-width: 480px) {
      .em-osm-container {
        max-width:75%;
      }
    }

    Used 75% to show the difference more clearly.

    Here’s the result.
    https://paste.pics/fd1619a55d87711f94e5e6415b30fe64

    Try it by adding !important; It could be you need to overrule another setting in your style sheet. Also, check there is no !important in your EM Map settings.

    Dirk

    (@dirkhag)

    I tried your code but with same result. In my case it is not working.

    The only way to geht the map in the correct size is to use the settings in EM -> Formats -> Maps -> Default Width Map -> 300px!

    But then I have the width of 300px also on Desktop View and this is not what I want.

    What are your settings in EM -> Formats -> Maps -> Default Width Map -> ????
    These are settings within EM that have also an impact on OSM-Maps.

    Plugin Author Stonehenge Creations

    (@duisterdenhaag)

    The ONLY settings that are taken from EM are the default map dimensions (which you can alter with CSS!!) and the content of marker pins/balloons.

    This is working now….

    .em-osm-map{
       width:400px !important;	 
     }
    

    …and for mobile view (portrait)…

    @media screen and (max-width: 480px) { 
    	
    .em-osm-map{
       width:340px !important;	 
    	}}
    • This reply was modified 6 months, 3 weeks ago by Dirk.
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Responsive Map’ is closed to new replies.