Change the height to be in pixels or rems rather than in a percentage(%). Percentages are based on the value of the parent element (which is currently 0).
.header {
width: 100%;
height: 20vh; // or 20px, 1em, 1rem ...
background-color: #7fffd4ad;
}
The height need a value.. 20% of what ?
Try height: 30px to see.
Maybe you can try: height: 20vh; too.
Will do what you want: 20%
.header {
width: 100%;
height: 20vh;
background-color: #7fffd4ad;
}
.header {
width: 100%;
height: 20vh;
background-color: #7fffd4ad;
}Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
you can visit it to get more details : Css Viewport Units
I just started working on a new website, and I’m just trying to map out where everything will go. I made a few divs of the stuff I want. When trying to add the background color to them in CSS it doesn’t apply the color.
HTML
<body>
<div class="header"></div>
<div class="hero"></div>
<div class="ads"></div>
<div class="content-1"></div>
<div class="content-2"></div>
<div class="form"></div>
<div class="footer"></div>
</body>
CSS
html {
font-family: 'Muli', sans-serif;
}
.header {
width: 100%;
height: 20%;
background-color: #7fffd4ad;
}
ohhhh, thank you, I did vh before in another project, I forgot that its not the same as width
@Zombie_Slayer_19, if my answer helped you, you can accept the answer. Maybe can help another person in the future. See ya.