I am trying to create a two column flexbox that turns into 1 column when the max-width is 800 px. The behavior I am trying to recreate is here: https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_responsive2
I have followed the exact css properties from that tutorial but I am not sure why the media query is not responding to my code.
I have a link to my project here: https://codepen.io/saminaCodes/pen/QWEzBmE?editors=1100
HTML Portion
<section class = "section-container">
<div class = "description">
<h2> Project Name / Job Title </h2>
<p> Apple pie cotton candy pie powder jelly pudding caramels sesame snaps. Chupa chups donut brownie
chocolate cupcake apple pie lemon drops oat cake. Cupcake cotton candy marshmallow sweet roll halvah
lollipop croissant tiramisu </p>
<hr>
<p class = "notes">
<b class = "bold">Date:</b> October 2020 - Present<br>
<b class = "bold">NOTES:</b> n/a<br>
</p>
<a href = "#"> Join organization name>></a>
</div>
<div class = "content">
</div>
</section>
CSS Portion
.section-container {
width: 80%;
display: flex;
flex: wrap;
margin: auto;
}
.description {
flex: 40%;
padding: 1em;
}
.content {
flex: 60%;
border: solid 0.25em #FFCC5C;
border-radius: 20px;
padding: 1em;
}
@media (max-width: 800px) {
.description, .content {
flex: 100%;
}
}