Map Height Google

Hello,

My site is glendalefilipinosda.org. I have added Classic Map Embed and used an iFrame from Google. How do I change the height of the map? It is too tall for my website’s liking.

Thanks,
Casey

Hi there,

Please go to the settings of the google Mpa Embed element and add the limitedheight class to it:

Then add the CSS code below to X > Theme Options > CSS:

.x-map.limitedheight .x-map-inner iframe {
    height: 300px;
}

Change 300px to your liking.

I strongly suggest that you use the Map element as it will give you a better control over the Map and you will have no need for hacky CSS code:
https://theme.co/apex/forum/t/elements-map-element/10231/1

Thank you.

Thanks! It worked, however, there is white space under my map now. Please check the site again: www.glendalefilipinosda.org

Hi There,

Could you please try adding the following CSS rule also and see if that helps.

.limitedheight .x-map-inner {
    padding-bottom: 0;
    min-height: 350px;
}

Hope that helps.

awesome, that worked!

Thanks!

Glad to hear that. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.