OSM map not responsive

  • Resolved Benoit Gütz

    (@buxert)


    3 years, 7 months ago

    Hi Patrick,

    My location maps on location detail pages are not responsive. On mobile, the map is bigger than the screen. For these pages I use the Event Manager formatting and have the following code:

    <div style="float:right; ">#_LOCATIONMAP</div>

    How can I make them responsive?

    I already tried this:

    @media screen and (max-width:1000px) {
.em-osm-container {max-width: 100% !important;}
}

    But that doesn’t work.

    The page I need help with: [log in to see the link]

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

    (@duisterdenhaag)

    Hi Benoit,

    I see what you mean… I see that in your source code the width is inline:
    style="width: 600px; height: 400px;"
    That is something Events Manager does, according to your settings.

    In Events > Settings > Formatting > Maps empty the first two text fields (width & height). That will remove the inline-styling.

    In Event > Settings > Formatting > Single Event Page remove the div with “float: right;” and just keep the #_LOCATIONMAP placeholder.

    Then for the CSS.
    Looking at your site the first breakpoint for the map with the address left of it, could be 768px (iPad Mini portrait). On screens wider than 890px, the map can be 600px again. 

    .em-osm-map {
  display: block;
  width: 100%;
  height: 250px;
}

@media screen and (min-width: 768px ) {
  .em-osm-map {
    display: inline-block;
    max-width: 400px;
    height: 400px;
    float: right;
  }
}
@media screen and (min-width: 890px ) {
  .em-osm-map {
    max-width: 600px;
   }
}
    Plugin Author Stonehenge Creations

    (@duisterdenhaag)

    Another thing to look into is in your header, lines 10-15. The browser console gets an unexpected token:

    <script><br />
      window.dataLayer = window.dataLayer || [];<br />
      function gtag(){dataLayer.push(arguments);}<br />
      gtag('js', new Date());</p>
    <p>  gtag('config', 'G-0XSFQ6P3PG');<br />
    </script>

    Script can not have html tags like line breaks and pargraphs, of course. ??

    Thread Starter Benoit Gütz

    (@buxert)

    Thanks @duisterdenhaag, it works!

    And thanks for pointing out the unexpected token. The HTML wasn’t supposed to be there but was added automatically. I fixed it.

    Plugin Author Stonehenge Creations

    (@duisterdenhaag)

    Glad I could help.
    Enjoy the free maps.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘OSM map not responsive’ is closed to new replies.

Tags