I'm facing an issue with a one-row grid that is supposed to stack two images on top of each other when the screen size reduces. The problem arises when the screen becomes too small, as the images and the grid itself are not properly centered.
https://i.sstatic.net/J3NEW.jpg
Despite trying various approaches, I can't seem to get the images centered on the screen when it's too small.
https://i.sstatic.net/pewTY.jpg
All the code resides within a component, which is part of a larger 3-column grid layout (with "stuff on the left" and "stuff on the right").
Here is my code snippet where I've added background colors to distinguish elements:
<body class="justify-content-md-center" style="justify-content: center; align-items: center; background-color: blue">
<div class="container justify-content-md-center" style="width: auto; justify-content: center; align-items: center; background-color: grey">
<div class="container center" style="justify-content: center; background-color: yellow"> <!-- global canvas -->
<div class="row no-gutters justify-content-md-center style="justify-content: center; background-color: red">
<div class="col-sm" style="justify-content: center; background-color: green">
<img src="./images/fssFront.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm">
<div class="center-content">
<img src="./images/fssBack.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div> <!-- global canvas -->
</div>
</body>
Being new to CSS, HTML, and Bootstrap, I feel like there's something fundamental I'm overlooking. Any help or guidance would be greatly appreciated.
Thank you.