Why is my image not responsive when screen size decreases?

Question

So I'm having a mental block as to why the image is not decreasing when the screen decreases in size. I'm creating a signature block, and I want the image to decrease / be responsive, so the entire wrapper will not stack to two columns; I'd like it to be just one.

I know making the image have a max-width 100% and an auto height should make it responsive, but it's not making it such. I thought giving a width to the wrapper and the div parenting it would do, but it hasn't.

    .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>&nbsp;Company Title</p>
        <hr>
        <p><span>P</span>&nbsp;<a href="tel:">&#40;123&#41;456-7890</a>&nbsp;&nbsp;&nbsp;<span>E</span>&nbsp;<a href="mailto:">123&#64;abccompany.com</a></p>
        <p><span>URL</span>&nbsp;<a href="" target="_blank">www.company.com</a></p>
    </div>
</div>

Codepen view here

I'd like for it to scale down the image as the screen sizes decreases so the signature / body / sides doesn't have to stack. Please assist if possible. Thanks!

i suggest adding `html` and `css` as tags. Also, placing the code in a jsfiddle or the like (in addition to your post), will make it easier for others to respond. — joshvito, Jun 04 '19 at 18:28
@joshvito I thought I took that out? I no longer see that on my end. — mutigerlily, Jun 04 '19 at 18:41
It sounds like you may consider using a flexbox to achieve your result. Take a look at https://stackoverflow.com/questions/31476024/how-to-arrange-three-flex-div-side-by-side — joshvito, Jun 04 '19 at 18:49
@joshvito I updated the codepen to add such, still nothing. Thanks though! — mutigerlily, Jun 04 '19 at 18:56

score 0 · Accepted Answer · answered Jun 04 '19 at 19:18

0

try using view-port units instead of percent. here's a reference, take a look: https://www.w3schools.com/cssref/css_units.asp

answered Jun 04 '19 at 19:18

EshgheCode

288
4
19

That worked; I knew I was having a brain fart, haha. Thank you @EshgheCode! – mutigerlily Jun 04 '19 at 19:21

Why is my image not responsive when screen size decreases?

1 Answers1