CODEWITHSUNDEEP
emailmailchimpcss
user1591241
user1591241

Reputation: 1

Overriding max-width (or scaling up a small image for mobile)

I'm working on a responsive email using Mailchimp and all images are scaling down fine except for an image which has to have max-width set to 160px. This comes up fine on desktop but on mobile displays smaller than 100% width.

I've set up the following:

@media only screen and (max-width: 480px) {
    img[class=mcnImage] {
        width:100% !important;

But it still comes up too small. Any ideas?

Upvotes: 0

Views: 3173

Answers (2)

Gaurav Kakkar
Gaurav Kakkar

Reputation: 358

agree with above comment that you should follow this standard way to refer the elements.. but for the solution of your problem, you can try adding max-width:auto to your code;

@media only screen and (max-width: 480px) {
    img[class=mcnImage] {
        width:100% !important;
        max-width:auto;
    }
}

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49238

As my comments above state, there's possibly a couple of things that could be legitimately getting in the way here. However, this is pure speculation, but consider for a moment...

CSS

img[class=one] {
    border: 5px solid blue;
}

HTML

<img src="http://dummyimage.com/50x50" class="one"/>
<img src="http://dummyimage.com/50x50" class="one "/>
<img src="http://dummyimage.com/50x50" class=" one"/>
<img src="http://dummyimage.com/50x50" class=" one "/>
<img src="http://dummyimage.com/50x50" class="one two"/>

Before seeing what happens on the fiddle, first see if you can figure out what should happen (if you're familiar with the [] attribute selector).

Think you got it? Check out the fiddle.

img[class=term] not only is unnecessary (class selecting with img.term works perfectly), but it only selects one of the images. [attr=term] matches on an exactly statement, no whitespaces or anything. I don't know if that' srelated, but it's worth noting. nonetheless.

Upvotes: 1

Related Questions