Struggling to figure out why the image is not responsive when the screen size decreases. I'm trying to create a signature block where the image adjusts in size, preventing the wrapper from stacking into two columns and keeping it as one.
I've tried setting the image's max-width to 100% and height to auto for responsiveness, but it's not working. Additionally, giving width to both the wrapper and its parent div hasn't solved the issue either.
.wrapper {
max-width: 100%;
height: auto;
}
.leftSide {
float: left;
padding: 20px 0;
}
img {
max-width: 100%;
height: auto;
}
img,
.rightSide {
margin: 20px;
}
.rightSide {
display: inline-block;
font-size: initial;
}
<div class="wrapper">
<div class="leftSide">
<img src="https://dummyimage.com/200x150/000/fff" alt="">
</div>`enter code here`
<div class="rightSide">
<p><span>First Last</span> Company Title</p>
<hr>
<p><span>P</span> <a href="tel:">(123)456-7890</a> <span>E</span> <a href="mailto:">123@abccompany.com</a></p>
<p><span>URL</span> <a href="" target="_blank">www.company.com</a></p>
</div>
</div>
Check out the Codepen view here
Looking for assistance to have the image scale down as the screen size decreases so that the signature/body/sides do not need to stack. Any help would be greatly appreciated. Thank you!