CODEWITHSUNDEEP
htmlcssresponsive-designhtml-email
user3200227
user3200227

Reputation: 11

HTML Email breaks at odd resolution

I've built out a responsive HTML email, however, before it hits the media query it breaks between a 20px resolution difference. Between 600px and 620px I don't understand why. Everything has been ran through a validator, parsed, etc and came out as validated. I figured since this break in response is causing the odd lookout in YMail and a few other clients. Any thoughts?

JSFIDDLE: http://jsfiddle.net/V6GQ9/

@media only screen and (max-width: 600px) {
  a[class="btn"] {
    display: block!important;
    margin-bottom: 10px!important;
    background-image: none!important;
    margin-right: 0!important;
  }
  div[class="column"] {
    width: auto!important;
    float: none!important;
  }
  div[class="column-left"] {
    width: auto!important;
    float: none!important;
  }
  div[class="column-right"] {
    width: auto!important;
    float: none!important;
  }
  }

Upvotes: 1

Views: 60

Answers (1)

Justin K
Justin K

Reputation: 369

There are two things in your markup that is causing the problem.

1) The table with the body-wrap class needs to have the cellpadding, cellspacing and border attributes set:

  <table class="body-wrap" border=0 cellpadding=0 cellspacing=0>
  </table>

The reason being due to legacy and browser specific defaults clients add a few pixels there which causes the area for the content to be less than 600 pixels hence pushing the right column down.

2) When you set the media query width to 600px it doesn't take into account the right scrollbar which eats a few pixels into the content space. You'd notice if you eliminate the bottom content and there is no scrollbar, the amount of discrepancy is less.

The solution is to set the media query max-width to something larger like 620px OR to reduce the width content taken by the two columns.

In addition you could also set the border, cellpadding, cellspacing attributes on the table but you don't have to if you increase the media query max-width to accomodate it.

Welcome to designing for email. Its a whole different ball of wax here :)

Upvotes: 1

Related Questions