my div is hidden when screen-width < 992px

Question

I'm practicing bootstrap4 layout, when screen width is less than 992px, my brown-div is override by yellow-div, why and how to fix this?

Here is the snippet:

 .header { height: 100px; } .header .blue { height: 100%; background-color: blue; } .header .brown { height: 100%; background-color: brown; } .content { height: 100px; } .content .yellow { height: 100%; background-color: yellow; } .content .green { height: 100%; background-color: green; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row header "> <div class="col-md-2 col-xl-2 blue ">blue div</div> <div class="col-md-10 col-xl-10 brown">brown div</div> </div> <div class="row content "> <div class="col-md-2 col-xl-2 yellow ">yellow div</div> <div class="col-md-10 col-xl-10 green">green div</div> </div> </div> 

Answer 1

Seams to me your issue is at less then 768px , not 992px. Here goes:

Your child divs (blue, brown, yellow and green) take up 100% height off the parent divs (header and content). Therefor the content row will cover the brown div when blue and brown are under each other.

If there was a third row like this, the green div would also be covered by the third row.

To fix this, you should add media query : make the child divs 50% height off the parent div and maybe make the parent divs height times 2. Like this:

 .header { height: 100px; } .header .blue { height: 100%; background-color: blue; } .header .brown { height: 100%; background-color: brown; } @media (max-width: 767px) { .header { height: 200px; } .header .blue, .header .brown { height: 50%; } } .content { height: 100px; } .content .yellow { height: 100%; background-color: yellow; } .content .green { height: 100%; background-color: green; } @media (max-width: 767px) { .content { height: 200px; } .content .yellow, .content .green { height: 50%; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row header "> <div class="col-md-2 col-xl-2 blue ">blue div</div> <div class="col-md-10 col-xl-10 brown">brown div</div> </div> <div class="row content "> <div class="col-md-2 col-xl-2 yellow ">yellow div</div> <div class="col-md-10 col-xl-10 green">green div</div> </div> </div> 

Hope it helps. Cheers!

Answer 2

Try this, You don't have to specify static value for header and content, Specify height value for every part separately, If you want it to be due to height of view port use vh unit like height: 5vh;

 .header .blue { height: 100px; background-color: blue; } .header .brown { height: 100px; background-color: brown; } .content .yellow { height: 100px; background-color: yellow; } .content .green { height: 100px; background-color: green; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row header "> <div class="col-md-2 col-xl-2 blue ">blue div</div> <div class="col-md-10 col-xl-10 brown">brown div</div> </div> <div class="row content "> <div class="col-md-2 col-xl-2 yellow ">yellow div</div> <div class="col-md-10 col-xl-10 green">green div</div> </div> </div>