Currently, I am tackling a project involving two images of the human body - one for the front and one for the back. Both images are set at a height of 80vh. The challenge lies in my use of bootstrap to align these images side by side when the screen is wide, and stack them on top of each other when the screen is narrow using col-xs-12 / col-md-6 classes. However, I find that these columns are not as responsive as I would like them to be. Ideally, I want the images to stay next to each other unless they absolutely need to be stacked. Any suggestions on how I can achieve this? Thank you in advance!
Here is the current HTML structure:
<div class="row">
<div class="col-md-2"></div>
<div class="col-xs-12 col-md-4" id="bodyMapFrontContainer">
<img src="frontBodyImage.png" class="questionInputMethod" id="bodyImageFront" />
</div>
<div class="col-xs-12 col-md-4" id="bodyMapBackContainer">
<img src="backBodyImage.png" class="questionInputMethod" id="bodyImageBack" />
</div>
<div class="col-md-2"></div>
</div>
Corresponding CSS styling:
.questionInputMethod {
margin-left: auto;
margin-right: auto;
text-align:center;
}
#bodyImageFront, #bodyImageBack {
display:block;
max-height: 60vh;
max-width: 90%;
height:auto;
width: auto;
margin-bottom: 10px;
z-index:1;
position:absolute;
}