Chrome Is Stretching My Images Vertically, However Everything Works Fine In Firefox/edge

Hi guys so I'm having this problem where images at the bottom of my website are being stretched vertically in chrome between @media only screen and (min-width: 401px) and (max-wid

Solution 1:

It appears that Chrome doesn't understand height:auto; on the img in this case. This can be fixed using:

@ stylesOLD.css | Line: 316

/* Tablet Styles */@mediaonly screen and (min-width: 401px) and (max-width: 960px)
{
    .feature-1,
    .feature-2,
    .feature-3
    {
        width: 50%;
        float: left;
        height: 50%; /* or 100% */
    }

    .sign-up
    {
        width: 50%;
        float: left;
        height: auto;
    }
}

This should make the images height match but keeping the .sign-up auto height so not to affect it. Hopefully this works for you too.

Solution 2:

Instead of this:

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

Try this:

img {
    max-width: 100%;
    height: 100%; /* adjustment */
}