Embedded Google Maps Sizing Issue

[bobbyoliveri]

I can’t seem to avoid having the map not stay 100% height of the column when viewing from different devices. Looks find at larger widths, but the smaller screen size squeezes the map which looses the matching column design. See pics below.

looks good full width:

But squeezed when smaller screen size

[lely]

Hi @bobbyoliveri,

The frame padding container controls the height of the MAP element. You may try to set it to 100%. If you inspect the map element, you can see it the container with this class: .x-frame .x-frame-inner

Here’s your guide on how to inspect the element:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

You can see those container default padding. Increase the padding. Let say to 100%

.x-frame .x-frame-inner{
    padding-bottom: 100%;
}

Add the CSS on your page content CSS so it will not override other page settings. Note this CSS is a guide only and further customization is outside the scope of our support. Thank you.