I have organized two divs around another div with the ID of "about." When viewing in a full-size browser, the content appears centered both horizontally and vertically, which is my desired layout. However, when the window size is reduced, I would like these two divs to stack on top of each other rather than being displayed side by side.
In my attempt to achieve this, I aim to reset the properties of the wrapper element (about). Here is my CSS:
#icon{
border: solid;
border-color: red;
border-width: 2px;
max-width: 200px;
}
#about{
min-height: 100%;
min-height: 100vh;
<!-- The following two lines horizontally and vertically center the about section -->
<!-- If removed, the content stacks responsively as intended,
but loses the vertical alignment and shifts to the top of the page -->
display: flex;
align-items: center;
}
#aboutInfo{
border: solid;
border-color: red;
border-width: 2px;
padding: 0;
}
@media (max-width: 768px){
#icon {
max-width: 100px;
}
<!-- RESET ATTEMPT -->
#about {
float: none;
width: 100%;
}
}
How can I adjust the centering behavior so that the elements stack up when the window is resized, while still maintaining the centered layout on larger screens? Below is the corresponding HTML structure:
<div class="container text-center">
<div class="row">
<div id="about">
<div class="col-sm-4 padding-0">
<img src="img/html5.png" id="icon">
</div>
<div class="col-sm-6 padding-0">
<div id="aboutInfo">
<h1>Lorem Ipsum.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus.
Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus.
Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris.
In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor
maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien
a ex porta dictum.
</p>
</div>
</div>
</div> < !-- end of about -->
</div> <-- end of row -->
</div>