0

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%;
  }
}

2 Answers 2

1

Your code works well, but you missed a technical error in the flex rule in css. You have flex: wrap written, but you need to write flex-wrap: wrap correctly. For this reason, the above blocks are not wrapped in one column.

It should be like this:

.section-container {
  width: 80%;
  display: flex;
  flex-wrap: wrap; /*is here*/
  margin: auto;
}
0
0

Use width instead of flex. flex requires other parameters like shrink and grow e.g. flex: 0 1 40%;

.section-container {
  width: 80%;
  display: flex;
  flex: wrap;
  margin: auto;
}

.description {
  width: 40%;
  padding: 1em;
}

.content {
  width: 60%;
  border: solid 0.25em #FFCC5C;
  border-radius: 20px;
  padding: 1em;
}

@media (max-width: 800px) {
  .description, .content {
    width: 100%;
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.