CODEWITHSUNDEEP
htmlcss
Adilet Soronov
Adilet Soronov

Reputation: 139

Div elements do not wrap on the next line

I defined flexbox properties of container display: flex; flex-wrap: wrap; justify-content: center; but there are always 3 divs on the first row and 2 divs on the second. How to make it wrap divs when the browser resizes?

I tried almost everything (changed the width and height of parent container, changed width to min-width/max-width, set margin of parent container margin: 0 auto;).

<!-- HTML -->
<div class="parent">
  <div class="headline">
    <h2>Tea of the Month</h2>
    <h4>What's Stepping at The Tea Cozy?</h4>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Fall Berry Blitz Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Spiced Rum Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Seasonal Donuts</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Myrtle Ave Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
</div>
<!-- URL of images is correct -->

/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}

I expect the divs would wrap on next line. But there always are 3 divs on first and 2 divs on second line.

Upvotes: 1

Views: 1746

Answers (2)

Arno Tenkink
Arno Tenkink

Reputation: 1528

Your HTML contained some invalid closure tags, please validate your HTML you can check out: https://validator.w3.org/

Also removed the fixed width of 1000px, you want to have a fluid parent so it sizes acording to the device or browser width.

/* CSS */

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  /* changed */
  width: 100%;
}

.headline {
  display: block;
  width: 100%;
}

.container {
  margin: 0px 10px;
}

.image {
  width: 300px;
  height: 200px;
}
<!-- HTML -->
<div class="parent">
  <div class="headline">
    <h2>Tea of the Month</h2>
    <h4>What's Stepping at The Tea Cozy?</h4>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Fall Berry Blitz Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Spiced Rum Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Seasonal Donuts</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Myrtle Ave Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
</div>

Upvotes: 1

Alexandru Gatea
Alexandru Gatea

Reputation: 163

It happens because you set width:1000px on your .parent. This means that no matter the device size the parent will always be 1000px and there will always be 3 elements on the first row.

To solve this, set .parent {width: 100%; max-width: 1000px;}

cheers

Upvotes: 0

Related Questions