In this particular section, there is a div labeled programDescriptionDiv. Inside programDescriptionDiv, there are two separate divs. Normally, these two divs each take up 50% of the screen width.
The goal is to have the second div stack below the first one when the screen size becomes too small to accommodate both on the same row. This should be achieved with the CSS property flex-wrap: wrap, but it seems to not be working as intended.
Currently, when the screen width decreases, the two divs just resize while still trying to fill 50% of the screen width each. The desired behavior is for the divs to stack vertically on top of each other instead. What could be causing this issue in the CSS?
Code Snippets:
<section class="programDescriptionSection">
<div class="programDescriptionDiv">
<div class="imageDiv">
<img id="closingStemGapImage" src="../resources/closingStemGap.jpg" alt="">
</div>
<div class="paragraphDiv">
<p class="homepageSectionParagraph">
The Codigo Initiative aims to close the STEM opportunity divide in under-resourced Chicago-area school districts by connecting classroom
teachers with tech-industry professionals. This pairing creates sustainable Computer Programming curriculums where volunteers support
teachers as they learn the basics of Computer Programming. Ultimately, the teachers will infuse their newly-found STEM skills into their
existing classroom curriculums. The end-result is an enhanced classroom experience where teachers empower their students to compete in today's
economy, and inspire them to create a better future for themselves and their communities.
</p>
</div>
</div>
</section>
.programDescriptionSection {
width: 100%;
height: 30%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* align-items: center; center all contents vertically */
justify-content: center;
/*center horizontally*/
}
.programDescriptionDiv {
display: flex;
flex-wrap: wrap;
align-items: center;
/*center all contents vertically*/
justify-content: center;
/*center horizontally*/
width: 100%;
/*make the section take up the whole width of the screen*/
flex-direction: row;
}
.imageDiv {
width: 50%;
display: flex;
align-items: center;
/*center all contents vertically*/
justify-content: center;
/*center horizontally*/
min-width: 50%;
}
#closingStemGapImage {
/*Will fir the dimensions of the div dynamically.*/
max-width: 100%;
max-height: 100%;
}
.paragraphDiv {
width: 50%;
display: flex;
align-items: center;
/*center all contents vertically*/
justify-content: center;
/*center horizontally*/
}
.homepageSectionParagraph {
font-size: 90%;
width: 80%;
}