0

I'm having trouble with my @media query. When I resize the browser (chrome) it doesn't shrink. I've tried a couple solutions now and can't get it to work. I'm sure it's a simple user error but from the different articles and blogs I have read it seems this is the logical solution and should work.

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body-table">
          <tbody>
            <tr align="center">
              <td width="100%" class="container" bgcolor="#ffffff" height="100">

And the media query:

@media screen and (max-width: 600px){
        *[class="container"] { width:100% !important;}

}

Almost_Ashleigh
  • 524
  • 1
  • 4
  • 24

3 Answers3

2

I think the problem is you have a fixed width in your table. So try changing your fixed width to percentage. Like this

width="80%"
Shadow Fiend
  • 1,829
  • 1
  • 9
  • 14
1

Change 

width="600"
to 
width="50%"
Sudarshan Shenoy
  • 59
  • 8
1

Your .container table not shrink because it parent is fixed width. So instead of fixed width parent we will add width to the td that hold your main table.

<table border="1" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="600">
            <table class="container" width="100%" style="background: peru;">
                <tr>
                    <td>This will shrink when width less than 600 pixels.</td>
                </tr>
            </table>
        </td>
         <td></td>
     </tr>
</table>

You can find a more detail answer here or this pen here and I highly recommended you to check out this guide to see which CSS style each email clients support.

VK Da NINJA
  • 510
  • 7
  • 19