Responsive Template - Max Image width

Anyone have ideas on how to keep wides images from breaking the layout in a responsive template?

I've tried using:

img {max-width: 320px !important; height: auto !important;}

Which works everywhere except Yahoo.

Without the square brackets around a class, like:

img [class=myImage] {max-width: 320px !important; height: auto !important;}

Its causing that the 320px max-width styling to be applied on desktop breakpoints in Yahoo.

The user who's going to be entering in the content for these emails is not familiar enough in HTML/CSS to add a class to an image and then add the additional code up in the head.

Any ideas? Thanks in advance!

davidaf davidaf, 2 years ago

Hi Jordan,

In the template code, you should be able to add a class to the editable image tag itself, so that the class is automatically applied when the customer imports it via the email editor:

<img class="w320" editable src="image.jpg" width="600" label='Hero Image' />

I hope that is what you are looking for!

The Campaign Monitor Blog – HTML email smarts to go with your good looks
JordanK, 2 years ago

Thanks David, that is useful though I think I need something that's more ESP agnostic (if I'm understanding you right). This will end up going through multiple ESPs.

Thinking about it some more I wonder if the easiest fix is to just setup my HTML so that I can  target using bracket selectors instead of trying to find a way around them.

JordanK, 2 years ago

Here's where I'm headed with this. If anyone has an tips or feedback I'd be grateful.

So far testing results through Litmus are coming back fine.

  <style type="text/css">
        td [class=userContent] img {max-width: 320px !important; height: auto !important;}

<table width="100%" border="0" cellpadding="0" cellspacing="0">
        <td class="userContent"><img src="picture.jpg" width="400" height="100" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</td>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free