I have an image displayed on my website that I want to shift to the right specifically for mobile devices.
@media screen and (max-width: 450px) {
.my-img {
padding-left: 8em;
}
}
Although the image does shift to the right, it ends up shrinking in size and I am unable to enlarge it.
I attempted the following solution:
@media screen and (max-width: 450px) {
.my-img {
padding-left: 8em;
height: 500%;
width: 500%;
}
}
Below is the HTML code snippet containing the image:
<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>
However, the image remains unchanged. Any suggestions or ideas?