CODEWITHSUNDEEP
css
Caspert
Caspert

Reputation: 4363

How to override max-width for specific div?

I am searching for the following solution. In my CSS I have the following:

img, a img { 
    max-width: 100%;
    vertical-align: middle; 
}

This code is necessary for my WordPress theme and responsive web design. Now I want to override max-width property to auto. When I do this, it doesn't override:

#pixel-perfect img {
    max-width: auto !important;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

What did I do wrong?

Upvotes: 19

Views: 22536

Answers (4)

userG
userG

Reputation: 111

max-width: auto !important;

auto in max-width is not a valid property. You should replace it with 

max-width: none !important;

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24703

Ensure that your #pixel-perfect img CSS declaration is BELOW the img, a img declaration, otherwise it will get overwritten.

#pixel-perfect img {
    max-width: none;
    width: auto;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

Upvotes: 1

Malyo
Malyo

Reputation: 2000

I think it's because a img is more specific than #pixel-perfect img. Element selector is more specific than id selector (So in this example you have 2 elements vs 1element and 1 id).

In order to fix it, you'd have to add an element to your declaration, for example:

a#pixel-perfect img {
    max-width: auto !important;
}

Upvotes: 1

SeeMeCode
SeeMeCode

Reputation: 1435

Are you just looking to unset the max-width property? If so, try:

#pixel-perfect img {
    max-width: none;
}

Upvotes: 39

Related Questions