Looking for some help with flexbox! I have a container with 2 blocks inside. My goal is to change the flex-direction to "column" when the screen width is less than 700px, but I'm having trouble getting it to work. Currently, when the screen width is less than 700px, neither block is displaying. :)
Here's my code in index.html:
<html>
<head>
<title>Flexbox</title>
</head>
<body>
<div class = "container">
<div class = "slot_1"></div>
<div class = "slot_2"></div>
</div>
<style>
*{
margin: 0 auto;
padding: 0 ;
}
.container{
width:100%;
height:100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.slot_1{
background:red;
flex: 3;
}
.slot_2{
background:orange;
flex:1;
}
@media (max-width:700px){
.content{
flex-direction: column;
}
}
</style>
</body>
Hope someone can help me figure this out!