in

Image Responsiveness not working for mobile device


I have a fairly simple problem that I have been stuck at for hours. Would really appreciate if someone could help!

So, I am trying to make my images responsive but the breakpoints are working only till 576 view port. Below that, it’s failing.

Code-

<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-6">
            <img src="image1.png">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xs-6">
                <img src="image2.png">
        </div>
    </div>

CSS-

img{
max-width: 100%;
height:auto
}

Although, it’s working fine without these two lines also.
I want that >576, two images should align in a single row.

What am I doing wrong here?

Thanks!!



Source: https://stackoverflow.com/questions/70558810/image-responsiveness-not-working-for-mobile-device

a set of UI primitives that start their lives in clean HTML and CSS

Quick Tip: Java Message Service Class