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;
}
}
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. 😉
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.
Glad I could help.
Enjoy the free maps.
