html - My image only shrinks when I shift it to the phone display

Question

i have an image on my website and I want shift her on the right for mobile device.

@media screen and (max-width: 450px) {
  .my-img {
    padding-left: 8em;
  }
}

My image shift well to the right but it shrinks ( decrease in size ). and I can't make it bigger.

I tried this :

@media screen and (max-width: 450px) {
  .my-img {
    padding-left: 8em;
    height: 500%;
    width: 500%;
  }
}

Here it's my HTML :

<div class="col-md-4">
    <img src="assets/img/my-img.jpg" class="img-responsive wow fadeIn my-img" data-wow-delay="0.5s">
</div>

But nothing is happening. An idea ?

question from:https://stackoverflow.com/questions/65900861/my-image-only-shrinks-when-i-shift-it-to-the-phone-display

Answer 1

I think you need:

@media only screen and (max-width: 450px)

Try setting the values to extremes to make sure they are actually applying