Resize event maps on mobile

What I do is a CSS Media Query and have the map display only on screens above 600px.

Then I have created a custom attribute “google-maps-url” where I put/hold the map url. (something you’ll need to add manually for each event)

Then in the formatting tab for Settings>Formatting>Events, I’ve placed this HTML:

<a href="#_ATT{google-maps-url}" target="_blank" alt="Link to Google Maps" id="google-map-link">View On Google Maps</a>

Then, included in the Media Query I have (for the #ID I created: “google-map-link”):

@media screen and (max-width: 600px)	{

div.display-map	{
		display:none;
}

#google-map-link	{
	display:inline;
		font-size:80%;
	}
}

Of, course you need to make it not show up when >600px, so in your default CSS place this:

#google-map-link	{
	display:none;
}

And, for the default CSS for the map itself (my styling/layout with limited width and float:right; Your style needs will likely differ) The “display” property is what you need to make it show by default:

div.display-map	{
	float: right;
	margin: 0 0 .6em .6em;
	max-width:60vw;
	display:inline-block;
}

I hope this helps.

• This reply was modified 7 years, 3 months ago by logolessllc.
• This reply was modified 7 years, 3 months ago by logolessllc.