I am learning about media queries and a little why this media query is not working. here is my full code, thank you 🙂
My html:
</head>
<body>
<div class="container">
<div class="red">Red Lorem, ipsum dolor</div>
<div class="orange">Orange</div>
<div class="yellow">Yellow</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
<div class="indigo">Indigo</div>
<div class="purple">Purple</div>
</div>
</body>
</html>
My CSS:
<style>
.container {
color: white;
display: inline-flex ;
flex-direction: row;
border: 2px solid green;
flex: wrap;
flex:1;
font-size: 2rem;
}
@media (min-wdith:600px){
.container{
flex-direction:column;
}
}
.container * {
flex-shrink: 1;
}
/*
Select all the elements that are the direct
children of the .container class.
*/
.red {background-color: #eb4d4b;}
.orange {background-color: #f0932b;}
.yellow {background-color: #f6e58d;}
.green {background-color: #6ab04c;}
.blue {background-color: #4834d4;}
.indigo {background-color: #30336b;}
.purple {background-color: #be2edd;}
</style>
i followed along with a tutorial and made sure my syntax was correct, i expect when i shrink and expand my screen on VS my elements to go from flex row to flex column at a min-wdith of 600px
New contributor
Arli Aden is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.