Responsive Maps

Hi,

Not looking for help, just sharing an experience.

Over the last few years that I have been using the Event Manager plugin I have struggled with trying to get the maps to be responsive, after spending quite a few hours today mucking around with @media css trying to get it to do what I wanted, I finally stumbled across something and BINGO, it now does exactly what I want, where I want it to do it, with a minimum of fuss and no extra css to target the maps.

Ok, so first step is: Settings/Formatting/Maps set the default width at 100%

Step 2: Still in Settings/Events/Event Pages Tab, scroll down to Single Event Page/Single event page format and change the top line to the following:

<div style="float:left; margin:0px 0px 15px 0px; width:100%;">#_LOCATIONMAP</div>

Keep in mind I would think this might only work if you are using Post as the default “Display events as” setting, it may not work if you are using a custom template.

The code above will make your map show as the first thing in the event listing and will not cause any wrapping of text either side of it as the screen size changes.

It will also allow maps on pages and not posts to display in the full width of your content, IE: where ever you use the map shortcode it will display at 100%, have a quick look over my site and you will see it in action.

Hoping this saves someone else some time and heartache.

Admin, can I respectfully suggest you add this to your documentation to save others like myself some drama, thanks for the great plugin by the way.

Bam Bam

• This topic was modified 7 years, 1 month ago by Bam Bam.
• This topic was modified 7 years, 1 month ago by Bam Bam.
• This topic was modified 7 years, 1 month ago by Bam Bam.
• This topic was modified 7 years, 1 month ago by Bam Bam.
• This topic was modified 7 years, 1 month ago by Bam Bam.
• This topic was modified 7 years, 1 month ago by Bam Bam.
• This topic was modified 7 years, 1 month ago by Bam Bam.

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