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;
}
Hi there @PaulOB
You have advised the same in a video case also on a different post earlier. Thank you so much.
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.
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.
do you have the full code of it?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.