Google Map CSS

Without this part of the code, the map was not visible →

#map {
	width: 90%;
	height: 50vw;
	margin: auto;
}

height: 50vw; I get this work only through hit and trial. Is there a better way to write this to ensure that it does fit only well in the visible viewport as other code with also occupy viewport?

The current "other" code is not the true reflection of what can be achieved.

You could use aspect ratio for modern browsers to maintain the height to width ratio.

e.g.

#map {
  aspect-ratio: 16 / 9;
  width:90%;
 margin: auto;
}
2 Likes

Hi there @PaulOB
You have advised the same in a video case also on a different post earlier. Thank you so much.

1 Like

Or to do it the old way (for older browsers) use vertical padding as a percentage.

#map {
	width: 90%;
	margin: auto;
    padding-bottom: 55%;
}

This is similar to using vw but like aspect-ratio the height it relative to the element width, not the viewport width, so you could have a max-width set if you wanted.

2 Likes

This 55% padding is of what base value? View Port or remaining available height?

Neither.

Percentage padding (and margins) are based on the width of the ‘containing block’ (for both horizontal and vertical padding).

That’s why it can be used for aspect ratio as it has a direct correlation to the width. If it were based on height then there would be no aspect ratio maintained.

3 Likes

Thanks @PaulOB I will remember this and great learning of a concept.

do you have the full code of it?

Full Source Code?
This one → https://codepen.io/codeispoetry/pen/XWeWLrr