How can I make my divs wrap on window/screen size change?

user_13077335 0
Viewed 97

I know how to wrap items (in theory) but I must be doing something wrong. These are refusing.

I just want two profiles, side by side, that stack into a column when the window width shrinks. At the moment, they sort of squish together and overlap.

#profile-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  padding-bottom: 5%;
}

.profile-desc {
  width: 35%;
  margin: 5% 5%;
  text-align: center;
}

#profileM {
  height: 230px;
  width: 219px;
}

#profileF {
  height: 230px;
  width: 219px;
}
<div id="profile-container">
  <div class="profile-desc" style="float:left;width:35%;padding: 5px;">
    <img src="images/male.jpg" id="profileM">
    <h3 style="color:white;background-color:rgb(244,212,69);">
      Name
    </h3>
    <h4 style="color: rgb(244,212,69);">
      Occupation
    </h4>
    <p>
      Description
    </p>
  </div>

  <div class="profile-desc" style="float:right;width:35%; padding: 5px;">
    <img src="images/female.jpg" id="profileF">
    <h3 style="color:white;background-color:rgb(244,212,69);">
      Name
    </h3>
    <h4 style="color: rgb(244,212,69);">
      Occupation
    </h4>
    <p>
      Description
    </p>
  </div>

</div>

css html
2 Answers

What you are looking for is CSS media queries, it allows you to apply CSS when some conditions about the device (width or orientation for example) are met.

I tweaked your code adding a media query line (also I removed some not needed flex properties and removed some redundant inline styling on .profile-desc)

#profile-container {
  padding-bottom: 5%;
}

.profile-desc {
  float: left;
  width: 35%;
  margin: 5% 5%;
  text-align: center;
}

#profileM {
  height: 230px;
  width: 219px;
}

#profileF {
  height: 230px;
  width: 219px;
}

@media(max-width: 580px) {
  .profile-desc {
    width: 100%;
    margin: 0;
  }
}
<div id="profile-container">
  <div class="profile-desc">
    <img src="images/male.jpg" id="profileM">
    <h3 style="color:white;background-color:rgb(244,212,69);">
      Name
    </h3>
    <h4 style="color: rgb(244,212,69);">
      Occupation
    </h4>
    <p>
      Description
    </p>
  </div>

  <div class="profile-desc">
    <img src="images/female.jpg" id="profileF">
    <h3 style="color:white;background-color:rgb(244,212,69);">
      Name
    </h3>
    <h4 style="color: rgb(244,212,69);">
      Occupation
    </h4>
    <p>
      Description
    </p>
  </div>

</div>

user_88756430

You could avoid the media query and rely on flexbox adaptability by telling it the size of the content. flex-basis: content achieves the same result but it is not widely supported. The relevant change is:

.profile-desc {
  flex-basis: 35%;
}
user_46685890
Related