map width curtained when no organiser specified

[Alan]

Hi

When viewing a single event, if I include an organiser then in venue details below the embedded map fills out the browser page width.

http://spruceweb.co.uk/paultest/course/quantum-touch-level-1-august-2015/

…however I don’t want to display an organiser, but when I do this the embedded map in the venue details uses less than half the available width. How do I correct this?

http://spruceweb.co.uk/paultest/course/357/

Thanks

Alan

[George]

Hey Alan,

Sorry you’ve run into these issues here – not sure exactly why it’s happening. As a fix in the meantime, hopefully, I’d recommend trying to add the following CSS to the bottom of your theme’s style.css file:


.tribe-events-event-meta.primary .tribe-events-meta-group.tribe-events-meta-group-gmap {
width: 66% !important;
}


You can play around with the exact width number there, of course, but hopefully this helps here.

Let us know if it does!

Thanks,
George

[Alan]

Hi George

If I specify an organiser then this CSS has no effect.

http://spruceweb.co.uk/paultest/course/quantum-touch-level-1-august-2015/

However when no organiser is specified then it solves the problem in desktop view. However the problem now appears on mobile devices where the map is positioned under the venue details and should therefore be set to 100% width.

http://spruceweb.co.uk/paultest/course/357

Is there CSS for specifying the map width on mobile devices?

Alternatively CSS to hide the organiser details might work?

Thanks

[George]

Hey Alan,

Yes, you can get quite granular with browser-size-specific CSS rules here using Media Queries. Definitely check those out online if you’re not familiar with them. An example of using these to improve the appearance of maps on your site is to replace the original code I recommended with this:


.tribe-events-event-meta.primary .tribe-events-meta-group.tribe-events-meta-group-gmap {
width: 100%;
}

@media ( max-width:768px ) {
.tribe-events-event-meta.primary .tribe-events-meta-group.tribe-events-meta-group-gmap {
width: 100%;
}
}


Play around with stuff like this and explore media queries online, this article is a great resource for example → https://css-tricks.com/css-media-queries/

Cheers!

[Alan]

Thanks George, that’s perfect now.

Alan

[George]

Great! Best of luck with your site, cheers 🙂

— George

[Author]

Posts