Hello everybody from sunny Bali

I am trying to put a Google map onto a site, I have followed Adam's instructions in the CC Articles section about how to do it.

It works fine except that the map takes up an awful lot of space and actually covers some other content below.

I have tried as much as I know to keep it set to the intended size but to no avail.

even the iframe link to Google is set to height 400px See attached screenshot, and the html element also set to max-height 400px the map just ignores everything.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3943.981516792496!2d115.19100811439677!3d-8.69330449095758!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd2412a6a814f8f%3A0x79e8c1e9c462ef3d!2sJl.+Pulau+Galang+No.37A%2C+Pemogan%2C+Denpasar+Sel.%2C+Kota+Denpasar%2C+Bali!5e0!3m2!1sen!2sid!4v1460431955462" width="800" height=400" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>


It is responsive no problem and at smaller screen sizes seems to behave itself, just at the large screen sizes, can't seem to keep it contained to the height required.

Any advice help would be greatly appreciated Thank

Wayan

Hey Wayan,

An easy fix is to simply constrain the size of the HTML Element you have pasted the code into. You can do this by setting a max-width, or adjusting the column span.

Hello Adam
It isnt the width that is the problem it is the height, I have tried setting max-height to a fixed amount, to none
I have tried setting the actual code from google to sze 400px all to nothing

I have tried constraining the row the .column the html element is in, I have tried constraining the html element

I sure am stuck now

i have put a border around the html element
if you look at the screenshot, you can see on the edge of the map the border, and you can see how the map itself doesn't stay within the html element

hope that sort of makes sense

If it is the height, you can adjust the max-height in the <style> section of the code you entered into the HTML input.

So you would add max-height: 400px; to the <style> and your code would look like:

That's it Thanks Adam

Simpole when you know how

Thanks again

Wayan

No problem!

~Adam from my dim lit office.