CODEWITHSUNDEEP
htmlcsshtml-email
zik
zik

Reputation: 3085

Responsive email table keeps breaking - what is causing this?

I'm working on an HTML Email which is working perfectly in the multiple email client/browser combinations I need to support save for this one problem which I just cannot figure out. I have a table that is 600px (which is the width of the email) wide and within this there is another table which is comprised of a top and bottom 'curve' image which has some text in the middle. As this email is responsive, when the browser window is made smaller the inner grey table just 'breaks'. I know this because I am using Litmus to test across a multitude of browser/email clients combinations.

Note: this ONLY happens when email is "resized" i.e. only on mobile email clients. If you look at the below fiddle, the portion I am talking about is the inner grey box that begins The Victims of Fraud.... This box (when resized) just will not play nice. I have tried everything I can think of, using padding, removing padding, nested tables and everything inbetween. It's driving me crazy.

In order to see what I mean open the fiddle then make the HTML window smaller.

Here is a fiddle to try and illustrate what I mean: http://jsfiddle.net/39gzj/2/

UPDATE: If you look using Firebug / Chrome Developer Settings, you will see that for some reason the table has this magic 2px added to the inner grey table. This is what I need to eradicate!

UPDATE 2: Tried again with what was posted in the comments but again this does not work.

http://jsfiddle.net/39gzj/2/

UPDATE 3 - I've even tried using a media query to explicitly resize this middle box but it still doesn't work. Here is the updated fiddle; http://jsfiddle.net/39gzj/5/

Upvotes: 4

Views: 2640

Answers (4)

zik
zik

Reputation: 3085

Right, so I finally managed to fix this but needed to use the media queries to fix the "breaking" of that middle row. Here's what I did;

Use a media query to explicitly size EVERY SINGLE ROW! So now, the image resizes properly, but once it gets to mobile viewport size it just snaps down to the correct size (max 300px) which you can see in the CSS. Here is the updated fiddle

Here is the media query that worked:

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
    *[id=mobile] {
        width:300px!important;
    }
}

This I know isn't really the correct way to answer this as I still haven't fixed the initial problem (why the table is breaking) so no sure what the mods wish to do with this bounty I put out there.

EDIT: As pointed out helpfully in the comments, if the screen size is BELOW 300pxthe email will automatically become normal size again, this can again be fixed by changing the media query but as noted, this answer currently solves issues specifically for the email clients/browser combinations I need to support.

Upvotes: 1

Cam
Cam

Reputation: 1902

Have you tried using min-width. To limit the size that it will shrink to. I would assume that if it shrinks it should only shrink to the point before it breaks. Am I right?

Upvotes: 1

RhinoWalrus
RhinoWalrus

Reputation: 3089

If you pull your static-width columns out that you're using for spacing and apply margin to the sub-tables to accomplish your spacing everything should line up properly. I'd imagine the spacing columns are the source of your angst.

Upvotes: 1

John
John

Reputation: 12193

Try setting up your table like this instead:

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc" style="border-radius: 5px; padding:30px;">
  <tr>
    <td>
text here. Put this inside a container with any media queries, should always stretch to full width.
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions