@DarkstarXDD
Posted
- Remove the
heighton your<div.content>. No need to set fixed heights for containers. Let the content inside the container define the height of the container. Because you have set a fixed height for your container some of your elements go out of your container in smaller screen sizes. - The
<p.header>should be a<h1>for this project. On a proper website where there a multiple components it may be a h2 or h3 depending on other content. But here it is a<h1>since there are no other components. - Instead of using
px, useremwhen settingfont-size. Reference
@karthikganesanTR
Posted
@DarkstarXDD i am using height in main container div.container. why some places height is not needed. And also when i want to have spacing between elements in container. I used justify-content: space-around. Due to unavailability of height, content is unable to distributed within the container. I used height here. How to achieve this without height? using margin between elements.
@DarkstarXDD
Posted
@karthikganesanTR Go into your browsers developer tools and resize your screen to a small screen size like 250px. You will see the content of your container card is overflowing. When the horizontal space is being reduced the content automatically wraps and takes up more vertical space. But because you have set a fixed height to the card, the card won't be expanded with the content. Resulting in, your cards content overflowing outside of the card. Remove that fixed height on your <div.content> and you will see that the content no longer overflows.
The height you have set for the div.container is saying to take the 100% of the viewports height. Basically it's allowing your div.container to take all the available height of the screen. This allows the children to be centered vertically. Otherwise by default the <div.container> would only take the minimum amount of height that's needed to fit the child content. So your vertical centering won't work. This is why in some places you need to have a height and in some places you don't want to have a fixed height.
As for your second question, you can use margin, or gap property of Flex or Grid layouts to create the spacing between your elements.
Marked as helpful
