Change the height of Google Maps on Single Event page

[kalalau]

Is there a way to change the height of the Google maps on a Single Event page? I am able to change the width in CSS, but that doesn’t seem to work for the height. It just stays the same height no matter what value I use in the CSS property.

[Casey]

kalalau,
Good to hear from you again! Try using some CSS similar to this and see if it does the trick:


.single-tribe_events .tribe-events-meta-group #tribe-events-gmap {
height:500px !important;
}


Thanks! 🙂

-Casey-

[kalalau]

That doesn’t seem to be working. I put the CSS in my tribe-events.css in my theme’s tribe-events folder, but the height stays the same.

/* Map */
.single-tribe_events .tribe-events-venue-map {
width: 80%;
height: auto;
background-color: white;
border-radius: 0;
border: 1px solid rgba(135,135,135,1.00);
padding: 1px;
float: left;
margin-top: 0px;
}
.single-tribe_events .tribe-events-meta-group #tribe-events-gmap {
height: 500px !important;
}

[kalalau]

I tried the height property on the following CSS instead and it worked:

.single-tribe_events #tribe-events-gmap {
height: 500px !important;
}

Hopefully, I won’t be causing any issues with this. If so, let me know.

[Casey]

Great! Thanks for confirming that this got you sorted. Since it looks like you’re all set, I’m going to mark this thread “Answered” and close it out.

By the way, if you have a minute or two, we would love it if you’d write a few words for us here: http://m.tri.be/lo

Thanks in advance. 🙂

Cheers,
Casey

[Author]

Posts