CODEWITHSUNDEEP
cssflexbox
Aessandro
Aessandro

Reputation: 5761

CSS flexbox responsive div

I have the following codepen: http://codepen.io/AlexanderWeb00/pen/NpKyRm

below 500px I would like to have 2 divs next to each other so I have changed the width to 50%

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
    max-width: 960px;
}

// * {
//   box-sizing: border-box;
// }

.container__item {
    align-content: center;
    border: 1px solid #333;
    display: flex;
    flex-basis: 1;
    font-size: 3em;
    justify-content: center;
    margin-bottom: 1em;

    // maintain aspect ratio 
    width: 24%;
}

@media screen and (max-width: 500px){ 
  .container__item {
      width: 50%;
  }
}

but they only stuck under each other.

Upvotes: 1

Views: 114

Answers (1)

sol
sol

Reputation: 22919

The border on the item is creating a width greater than 50%. Add this to ensure this does not happen:

.container__item {
    box-sizing: border-box;
}

codepen

For better spacing, change this:

@media screen and (max-width: 500px){ 
  .container__item {
      width: 49%;
  }
}

Upvotes: 1

Related Questions