Using @media in css of HTML Email

Question

I'm trying to get a HTML email to print a table at a lesser width than it looks on screen. I've put in:

@media print{
  .style1 {
    width: 500;
  }
}

When I print it still runs off the page. I've set it to a ridiculously small amount with no avail. The style1 is applied to a table which has a width of 100%, I thought the percent might be throwing it so I changed it to a width of 688 and got the same results. there are no rows or cells that have a fixed width in the table; they all use percents. Any suggestions?

Answer 1

width: 500 what? Pixels? Points? Ems?

Answer 2

If that is a direct example above, you need to provide a unit (px, em, etc.) for any values other than 0 in css definitions:

@media print{
  .style1 {
    width: 500px;
  }
}

This differs from the html attributes which assumes pixels. Hope this helps, -Matt

Answer 3

First of all, you should define a unit after the width. Most browsers still use pixel units as a failsafe though, so chance is this is not the actual problem.

What mailclient are you using?

Support for print CSS is not guaranteed across different mailclients.