I have a media object that displays an image with text next to it, and it looks good on larger screens. However, when I switch to a smaller screen, the text overflows and the images appear in different sizes and positions.
<div class="container">
<ul class="list-unstyled">
<li class="media">
<img
src="image.jpg"
class="align-self-center mr-3"
alt="..."
style="width: 277.5px; height: 220px"
/>
<div class="media-body">
<h5 class="mt-0">Suspendisse potenti. Quisque mattis.</h5>
<p class="pb-5">
Mauris tincidunt pellentesque risus, accumsan.
</p>
<p>1 hour • $9999</p>
</div>
</li>
<li class="media my-4">
<img
src="images.jpg"
class="align-self-center mr-3"
alt="..."
style="width: 277.5px; height: 220px"
/>
<div class="media-body">
<h5 class="mt-0 mb-1 align-self-center">
Sed congue rhoncus interdum.
</h5>
<p class="pb-5">
Ut euismod erat eget pharetra.
</p>
<p>1 hour • $9999</p>
</div>
</li>
</ul>
</div>
Currently, I have about four more images structured like this. Is there a way, either through Bootstrap or media queries, to make the images scale down to around 50px x 50px on smaller screens?
Thank you in advance for any assistance. :)