CSS Flexbox Not Breaking on Smaller Device Screens

Question

I have tried the flexbox layout on these boxes and it is not working as intended. I have tried the flex-direction: row and flex-direction: column to get them to break into 3 vertical boxes cleanly but I must be doing something wrong.

Do I need to add media queries to this as well to get them to conform?

Here is my code:

.product-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2px;
  margin: 0;
}

.cell {
  width: 33.333%;
  word-wrap: break-word;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

.product-grid .item {
  background: #ffffff;
  position: relative;
}
.product-grid .cell .item:nth-child(even) {
  background: #eeebe7;
}
.product-grid .item .thumb {
  width: 100%;
  text-align: left;
  padding: 0px;
}
.product-grid .item .con {
  position: absolute;
  right: 20px;
  top: 40px;
  text-align: right;
}
.product-grid .item .con2 {
  position: absolute;
  right: 20px;
  top: 40px;
  text-align: right;
}
.product-grid .item h1 {
  color: #000000;
  font-size: 32px;
  margin: 0;
}
.product-grid .item h2 {
  color: #9fa163;
  font-size: 22px;
  margin: 0;
}
.product-grid .item .btn-details {
  position: absolute;
  right: 50px;
  bottom: 30px;
}
.product-grid .item h2 {
  color: #a46a6a;
}
.product-grid .item .btn-details {
  background-image: url(images/plus2.png);
}

.btn-details {
  background: url(images/plus1.png) right center no-repeat;
  padding: 5px 44px 5px 0;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 400;
  font-family: "Oswald", sans-serif;
  color: #000000;
  display: inline-block;
}

<div class="product-grid">
  <div class="cell">
    <div class="item">
      <div class="thumb"><a href="https://ripelifewines.com/product/un-oaked-chardonnay/"><img class="alignnone" src="http://ripelifewines.com/wp-content/uploads/2016/12/Un-Oaked-Chardonnay2.png" alt="" width="366" height="400" /></a></div>
      <div class="con">
        <h2>Un-Oaked Chardonnay</h2>
        <h1>The Clambake</h1>
      </div>
      <a class="btn-details" href="https://ripelifewines.com/product/un-oaked-chardonnay/">See wine details</a>

    </div>
  </div>
  <div class="cell">
    <div class="item">
      <div class="thumb"><a href="https://ripelifewines.com/product/limited-edition-rose/"><img class="alignnone" src="http://ripelifewines.com/wp-content/uploads/2016/12/Limited-Edition-Rose2.png" alt="" width="370" height="400" /></a></div>
      <div class="con">
        <h2>Limited Edition Rosé</h2>
        <h1>The Clambake</h1>
      </div>
      <a class="btn-details" href="https://ripelifewines.com/product/limited-edition-rose/">See wine details</a>

    </div>
  </div>
  <div class="cell">
    <div class="item">
      <div class="thumb"><a href="https://ripelifewines.com/product/moules-marinieres-brut-sparkling-wine/"><img class="alignnone" src="https://ripelifewines.com/wp-content/uploads/2020/10/admin-ajax.png" alt="" width="366" height="400" /></a></div>
      <div class="con2">
        <h2>Brut Sparkling Wine</h2>
        <h1>Moules Marinières</h1>
      </div>
      <a class="btn-details" href="https://ripelifewines.com/product/moules-marinieres-brut-sparkling-wine/">See wine details</a>

    </div>
  </div>
</div>

Answer 1

Ofc, you need @media query to make your website responsive.
Media query added, for iPad and smaller devices.
Check CSS

.product-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2px;
  margin: 0;
}

.cell {
  width: 33.333%;
  word-wrap: break-word;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

.product-grid .item {
  background: #ffffff;
  position: relative;
}
.product-grid .cell .item:nth-child(even) {
  background: #eeebe7;
}
.product-grid .item .thumb {
  width: 100%;
  text-align: left;
  padding: 0px;
}
.product-grid .item .con {
  position: absolute;
  right: 20px;
  top: 40px;
  text-align: right;
}
.product-grid .item .con2 {
  position: absolute;
  right: 20px;
  top: 40px;
  text-align: right;
}
.product-grid .item h1 {
  color: #000000;
  font-size: 32px;
  margin: 0;
}
.product-grid .item h2 {
  color: #9fa163;
  font-size: 22px;
  margin: 0;
}
.product-grid .item .btn-details {
  position: absolute;
  right: 50px;
  bottom: 30px;
}
.product-grid .item h2 {
  color: #a46a6a;
}
.product-grid .item .btn-details {
  background-image: url(images/plus2.png);
}

.btn-details {
  background: url(images/plus1.png) right center no-repeat;
  padding: 5px 44px 5px 0;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 400;
  font-family: "Oswald", sans-serif;
  color: #000000;
  display: inline-block;
}

/*Media Query*/
@media(max-width: 768px){
  .product-grid {
    flex-direction: column;
  }
  .cell {
    width: 100%;
  }
}

<div class="product-grid">
  <div class="cell">
    <div class="item">
      <div class="thumb"><a href="https://ripelifewines.com/product/un-oaked-chardonnay/"><img class="alignnone" src="http://ripelifewines.com/wp-content/uploads/2016/12/Un-Oaked-Chardonnay2.png" alt="" width="366" height="400" /></a></div>
      <div class="con">
        <h2>Un-Oaked Chardonnay</h2>
        <h1>The Clambake</h1>
      </div>
      <a class="btn-details" href="https://ripelifewines.com/product/un-oaked-chardonnay/">See wine details</a>

    </div>
  </div>
  <div class="cell">
    <div class="item">
      <div class="thumb"><a href="https://ripelifewines.com/product/limited-edition-rose/"><img class="alignnone" src="http://ripelifewines.com/wp-content/uploads/2016/12/Limited-Edition-Rose2.png" alt="" width="370" height="400" /></a></div>
      <div class="con">
        <h2>Limited Edition Rosé</h2>
        <h1>The Clambake</h1>
      </div>
      <a class="btn-details" href="https://ripelifewines.com/product/limited-edition-rose/">See wine details</a>

    </div>
  </div>
  <div class="cell">
    <div class="item">
      <div class="thumb"><a href="https://ripelifewines.com/product/moules-marinieres-brut-sparkling-wine/"><img class="alignnone" src="https://ripelifewines.com/wp-content/uploads/2020/10/admin-ajax.png" alt="" width="366" height="400" /></a></div>
      <div class="con2">
        <h2>Brut Sparkling Wine</h2>
        <h1>Moules Marinières</h1>
      </div>
      <a class="btn-details" href="https://ripelifewines.com/product/moules-marinieres-brut-sparkling-wine/">See wine details</a>

    </div>
  </div>
</div>

Answer 2

Your CSS rule for .cell contains width: 33%, which is always ~ one third of the screens width - at any size. You can't expect that to change automatically.

But you can add a media query (with a max-width for mobile devices) where you set the width of the .cell divs to 100%. Then each cells will span the whole width and they will be below each other.

@media screen and (max-width: 600px) {
  .cell {
    width: 100%;
  } 
}

Answer 3

You've got a relative width in the cells (33%), so they're always shrinking to one third of the container's width. If you remove that value it does "break".