Boots πΊβ’ 1,590
@adityaphasu
Posted
Hi @CodageWithRahul!
Instead of giving the .main-container
an explicit height like height: 695px;
you should change it to min-height:100vh
like this:
.main-container{
min-height:100vh; //this
height: 695px; //no need for this
}
- Reason why we use
min-height:100vh
is because it will always take up the full height of the viewport, which helps prevent content from getting cut off and since we have flex properties on the container as well it will always be in the center.It also will adapt better to different screen sizes and orientations.
Some more suggestions based on your code:
- Instead of using
div
for.main-container
to represent the whole content on the page try using a more semantic tag like<main>
which tells the search engines and assistive technologies that the content inside it is the main content of the page. - Instead of using
px
for font size which is an absolute unit try usingrem
which is a relative unit and scales well with layouts. (In your casefont-size:19px
would turn roughly intofont-size: 1.1875rem
). Give this a read and you will understand a lot better.
Apart from some minor tweaks, the design looks absolutely amazing good job!
Keep up the hard work and good luck!ππ»
0