CODEWITHSUNDEEP
htmlcssflexbox
Susan B.
Susan B.

Reputation: 3

How can I use flexbox to make a three column layout turn into a two column layout (when the tab is resized)?

My goal is to have three responsive columns using flexbox. Currently, when resized, the columns can go left to right or up to down. I'm trying to make the three column layout go into a two column layout with the third column centered below the first two. However, the first and second columns don't go next to each other.

I google this and looked at other examples and tried to implement them, but I'm not sure why it still isn't working.

How can I fix this? Thanks in advance.

Link to my codepen: https://codepen.io/sbarclay7/pen/ZEQZvaj

html {
    height: 100%;
}
    
body {
    color: #FFFFFF; 
    text-align: center;
}


* { box-sizing: border-box; }


.wrapper {
    padding-top:2.1rem;
    display: flex;

    padding-bottom:2.2rem;
    max-width:40%;
    justify-content: center;
    margin:auto;  
}
    
.category {
    display: flex;
    flex-direction: column;
    width: 16rem;
    flex: 1; 
    background-color:#203a8a;
    border-radius: 0.7rem;
    border: 1.5px solid rgb(5, 30, 37);
    
    }
     
.flex {
    display: flex;
    flex-wrap: wrap; 
}
     

@media (max-width: 1000px) { 
    .wrapper {
      flex-direction: column;
      flex-flow: column wrap;

    }
    .category {
        width: 49%;
    }
  }


  @media (max-width: 700px) { 
    .wrapper {
      flex-direction: column;
    }
    .category {
        width: 100%;
    }
  }
   <div class="wrapper flex">
        
        <div class="category" style="flex-basis: 4rem;" >
          <h3>Header 1</h3>
          <p>a</p>
        </div>
    
        <div class="category"style="flex-basis: 4rem;" >
          <h3>Header 2</h3>
           <p>a</p>
        </div>
        
        <div class="category"style="flex-basis: 4rem;"> 
          <h3>Header 3</h3>
          <p>a</p>
        </div>
      </div>

Upvotes: 0

Views: 1014

Answers (1)

opensaucerer
opensaucerer

Reputation: 71

I noticed you modified the flexibility of the flex property by setting a flex: column property using media queries. This is currently affecting the resized display you are getting.

Remove the flex property added in the media queries and it should work just fine.

Upvotes: 1

Related Questions