Responsive Google Map

Hello,

Could you perhaps send us a sample link so We could send you a css that you could add. Alternatively, you could try going to Events > Settings > Formatting > Single Event page format. Then you could change the following line:

<div style="float:right; margin:0px 0px 15px 15px;">
#_LOCATIONMAP
</div>

to

<div class="em-google-maps-wrapper" style="float:right; margin:0;">
#_LOCATIONMAP
</div>

This code does not solve the issue.

You’ll find an example here….

Test Event

My experience is…

#_LOCATIONMAP in the format settings of a single event cannot be controlled by CSS. Whatever you add to CSS….it has no impact to the size of the map. If one puts e.g. width:300px in CSS, the map will be shifted but not resized!

The only way to adjust the size of the map is using the MAP-Settings EM -> Settings -> FORMATS -> MAP -> Width and Height.

Contrary to #_LOCATIONMAP the map showing all event locations can be controlled by CSS.

I have done a lot of testing (disabled plugins, changing themes, removing tweaks in functions.php, adding all kind of CSS….) – no chance!

@dirkhag, you are not using Google Maps. You also posted this same question on the EM OpenStreetMaps forum! ??

format settings of a single event cannot be controlled by CSS.

100% untrue, but with a link there is almost not finding what is interfering.

I think you are simply mixing up #_LOCATIONMAP with the admin map.

Yes, I have several homepages. On this homepage here, I use Google Maps. In both cases, I do not have control about the size of the map using CSS, regardless whether its Google Maps or OSM.
At least for me, it is not working!

Is it forbidden to post on several forums??? 100% untrue! Yes, I see, you have made your point!

@timrv: Can you help?

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

does it now!

And for mobile view (portrait)…

@media screen and (max-width: 480px) { 
	
		.em-location-map-container{
		width:340px !important;	
	}}