Responsive email continues to break - what causes this?

Question

I am working on HTML email that works great in multiple client / browser email. I need to support the persistence of this problem, which I simply cannot understand. I have a table with a width of 600px (which is the width of the email), and inside it there is another table that consists of the upper and lower "curved" images, which have some text in the middle. As this email responds when the browser window gets smaller, the inner gray table simply breaks. I know this because I use Litmus to test many combinations of browsers and email clients.

Note: this ONLY happens when the email is “modified”, that is, only on mobile email clients. If you look at the fiddle below, the part I'm talking about is the inner gray box that begins with The Victims of Fraud... This box (when resized) simply will not be beautiful. I tried everything that I can think of, using the registration, deleting the gasket, nested tables and everything in between. It drives me crazy.

To see what I mean, open the fiddle, then zoom out the HTML window.

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

UPDATE: if you look using the Firebug / Chrome developer settings, you will see that for some reason the table has this 2px magic added to the internal gray table. This is what I need to eradicate!

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

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

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

Answer 1

That's right, so I was finally able to fix it, but I had to use media queries to fix the “violation” of this middle line. Here is what I did:

Use media query for the explicit size of EVERY ONE HAND! So, now the image changes correctly, but as soon as it falls into the size of the mobile view, it simply decreases to the desired size (max 300 pixels), which you can see in CSS. Here is the updated fiddle

Here is the work with the media query:

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

I know that this is not the right way to answer this question, since I still have not fixed the original problem (why the table is broken), so I'm not sure what the mod wants to do with this generosity that I put out there.

EDIT: As stated in the comments, if the screen size is 300px , the email will automatically become the normal size, this can be 300px again by changing the media query, but as noted, this answer currently solves problems especially for email clients / browser combinations, which I need to support.

Answer 2

Try setting up the table as follows:

 <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> 

Answer 3

If you pull out the columns of static width that you use for the span and apply the margin to the sub-tables to span, everything should line up correctly. I would suggest that intermediate columns are the source of your longing.

Answer 4

You tried to use min-width. To limit the size by which it will decrease. I would suggest that if it contracts, it should only contract until it breaks. I'm right?