htmlcssflexboxresponsive-designmedia-queries

trying to have a responsive design for the items using media query and flexbox , but it is not working

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.item {
  margin: 10px;
  border: 1px solid lightgray;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

@media screen and (min-width:700px) {
  .item {
    width: 50%;
  }
  .container {
    flex-direction: row;
  }
}
<div class="container">
  <div class="item">content</div>
  <div class="item">content</div>
</div>

I was expecting a responsive design that when the screen is under 700px, the items should be columnar and when the screen is wider than 700px, the items should be in a row and their width should be 50%. However, it looks like just width: 50%; is applying.

This is the image:
enter image description here

Solution

  • You'd need to account for the .item elements' border-left-width, border-right-width, margin-left and margin-right. In your code at viewport width greater than 700px, each .item element takes up the following amount of horizontal space:

    50% + 10px + 10px + 1px + 1px = 50% + 22px
 ↑      ↑      ↑     ↑     ↑
`width` │`margin-right`    │
        │            │     │
  `margin-left`      │`border-right-width`
                     │
          `border-left-width`

    Thus, for 2 items of 50% + 22px width, this would be 44px greater than 100%, the width of .container, and thus will continue to wrap at viewport width greater than 700px.

    To have them display in the same row, consider adjusting their width, compensating for the extra space from their horizontal border widths and horizontal margins by subtracting this extra space, 22px, from 50%:

    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.item {
  margin: 10px;
  border: 1px solid lightgray;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

@media screen and (min-width:700px) {
  .item {
    width: calc(50% - 22px);
  }
  .container {
    flex-direction: row;
  }
}
    <div class="container">
  <div class="item">content</div>
  <div class="item">content</div>
</div>

    Alternatively, you could apply flex-wrap: nowrap on .container. This forces the .item elements to display in a row, by shrinking their widths to fit:

    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.item {
  margin: 10px;
  border: 1px solid lightgray;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

@media screen and (min-width:700px) {
  .container {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}
    <div class="container">
  <div class="item">content</div>
  <div class="item">content</div>
</div>