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>
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%;
}
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>
I did choose to remove flex from this use case because 1) I find it not as easy to understand ad simply width and media-queries 2) I find it a little bit overkill for this use case.
