Why are my divs disappearing when I use flex-direction? - html

Question

I am currently working on my webpage's responsiveness and have implemented flexbox for the positioning of my page's elements. The issue that I am experiencing is that when I use 'flex-direction: column' in my media query, the divs disappear upon the browser being resized. What am I doing wrong here?
#blue {
background-color: #57afb5;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#dark-green {
background-color: #29914c;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#green {
background-color: #91e3ad;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#orange {
background-color: #c98a32;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#top {
display: flex;
justify-content: space-around;
margin-top: 2%;
}
#bottom {
display: flex;
justify-content: space-around;
margin-top: 2%;
}
/* responsive web design*/
#media only screen and (max-width: 960px) {
#top {
display: flex;
flex-direction: column;
}
#bottom {
display: flex;
flex-direction: column;
}
/*end of responsive web design*/
<div class='main-content'>
<div id='Navbar_Link-Toggle' style='font-size: 20px'>
<i id='main' class='fas fa-bars'></i>
</div>
<div class='container'>
<div class='Navbar'>
<a class='links' href=''>FOOD</a>
<a class='links' href=''>FUN</a>
<img id='center-logo' src='img/SAMO.png'>
<a class='links' href=''>HISTORY</a>
<a class='links' href=''>LOCATION</a>
</div>
</div>
<div class='header'>
<img id='food' src='img/food.jpg'>
</div>
</div>
<div id='top'>
<div id='blue'></div>
<div id='dark-green'></div>
</div>
<div id='bottom'>
<div id='green'></div>
<div id='orange'></div>
</div>
</div>

Answer 1

The #top and #bottom divs have no height. You could give them a hight. I.E #top, #bottom { hight: 700px; }
Alternatively, use display: block; as illustrated in the example below.
Side note: When I have missing elements, I'll sometimes throw a border: solid red 2px; on them to better visualize what is happening. Hope that helps for next time!
#blue {
background-color: #57afb5;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#dark-green {
background-color: #29914c;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#green {
background-color: #91e3ad;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#orange {
background-color: #c98a32;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#top {
display: flex;
justify-content: space-around;
margin-top: 2%;
}
#bottom {
display: flex;
justify-content: space-around;
margin-top: 2%;
}
/* responsive web design*/
#media only screen and (max-width: 960px) {
#top,
#bottom {
display: block;
}
}
/*end of responsive web design*/
<div class='main-content'>
<div id='Navbar_Link-Toggle' style='font-size: 20px'>
<i id='main' class='fas fa-bars'></i>
</div>
<div class='container'>
<div class='Navbar'>
<a class='links' href=''>FOOD</a>
<a class='links' href=''>FUN</a>
<img id='center-logo' src='img/SAMO.png'>
<a class='links' href=''>HISTORY</a>
<a class='links' href=''>LOCATION</a>
</div>
</div>
<div class='header'>
<img id='food' src='img/food.jpg'>
</div>
</div>
<div id='top'>
<div id='blue'></div>
<div id='dark-green'></div>
</div>
<div id='bottom'>
<div id='green'></div>
<div id='orange'></div>
</div>