Responsive Map

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/

Great, thank you. I’ll try this.

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.

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.

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%;
}
}

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

Screenshot

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.

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.

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 4 years, 11 months ago by Dirk.