Email template not going the whole width of mobile

I have been on this all day and I cannot figure out what I am not doing or what I am doing wrong.

I am trying to get the tables to go the entire width of the mobile device. As you can see from the image below there is white on the sides of my tables and images.

Here is what it looks like now.

Here is what I need it to look like on the main url.

Here is the code I am using.




<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Responsive Email Template</title>

<style type="text/css">
	.ReadMsgBody {width: 100%; background-color: #ffffff;}
	.ExternalClass {width: 100%; background-color: #ffffff;}
	body	 {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
	table {border-collapse: collapse;}
	
	@media only screen and (max-width: 640px)  {
					body[yahoo] .deviceWidth {width:440px!important; padding:0;}	
					body[yahoo] .center {text-align: center!important;}	
			}
			
	@media only screen and (max-width: 479px) {
					body[yahoo] .deviceWidth {width:280px!important; padding:0;}	
					body[yahoo] .center {text-align: center!important;}	
			}

</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">

<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
		
			<!-- Start Header-->
			<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
				<tr>
					<td width="100%" bgcolor="#ffffff">

                            <!-- Logo -->
                            <table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
                                <tr>
                                    <td style="padding:10px 20px" class="center">
                                        <a href="#"><img src="http://tagwebstore.com/email/mobile/tag-email-logo.png" alt="" border="0" /></a>
                                    </td>
                                </tr>
                            </table><!-- End Logo -->

                            <!-- Nav -->
                            <table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
                                  <tr>
					<td valign="top" style="padding:0" bgcolor="#ffffff">
						<a href="#"><img  class="deviceWidth" src="http://tagwebstore.com/email/mobile/header-right.png" alt="" border="0" style="display: block; border-radius: 4px;" /></a>						
					</td>
				</tr>
                            </table><!-- End Nav -->

					</td>
				</tr>
			</table><!-- End Header -->
			
			<!-- One Column -->
             <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" >
                <tr>
                    <td>

			<table width="625"  class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#eeeeed">
				<tr>
					<td valign="top" style="padding:0" bgcolor="#ffffff">
						<a href="#"><img  class="deviceWidth" src="http://tagwebstore.com/email/mobile/middle.png" alt="" border="0" style="display: block; border-radius: 4px;" /></a>						
					</td>
				</tr>

			</table>

             </td>
                                </tr>
                            </table> <!-- End One Column -->


<div style="height:15px">&nbsp;</div><!-- spacer -->


            <!-- 2 Column Images & Text Side by SIde -->
            <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" >
                <tr>
                    <td>

                     <table width="625" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3bb894">
                            <tr>
                                <td>

                            <table align="left" width="51%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                <tr>
                                    <td style="font-size: 14px; color: #ffffff; font-weight: normal; text-align: left; font-family: Arial, Helvetica, sans-seriff; line-height: 24px; vertical-align: top; padding:10px 5px 10px 15px">
                                      <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
                                          The response to our holiday sale has been tremendous, so we’re ringing in the New Year with an extension of our huge 20% off sale. For every order of $200 or more (not including shipping), you get 20% off! Just use Promo Code NEWYEAR at checkout. Take advantage of this fantastic offer TODAY.
                                          <br/><br/>
                                          HURRY! Offer ends Jan. 31, 2014<br><br>

                                      <table width="100" align="center">
                                                <tr>
                                                    <td background="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/blue_back.jpg" bgcolor="#409ea8" style="padding:5px 0;background-color:#409ea8; border-top:1px solid #77d5ea; background-repeat:repeat-x" align="center">
                                                        <a href=""
                                                        style="
                                                        color:#ffffff;
                                                        font-size:13px;
                                                        font-weight:bold;
                                                        text-align:center;
                                                        text-decoration:none;
                                                        font-family:Arial, sans-serif;
                                                        -webkit-text-size-adjust:none;">
                                                                Read More
                                                        </a>

                                                    </td>
                                                </tr>
                                            </table>

                                        </p>
                                    </td>
                                </tr>
                            </table>
                             <table align="right" width="47%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                                <tr>
                                    <td valign="top" align="center" class="center" style="padding-top:20px">
                                            <a href="#"><img width="267" src="https://tagwebstore.com/email/NewYear2014/greenR.png" alt="" border="0" style="border-radius: 4px; width: 267px; display: block;" class="deviceWidth" /></a>
                                    </td>
                                </tr>
                            </table>
                         </td>
                </tr>
            </table>
                    </td>
                </tr>

            </table><!-- End 2 Column Images & Text Side by SIde -->

<div style="height:15px">&nbsp;</div><!-- spacer -->


			<!--Testimonial-->

               <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" >
                <tr>
                    <td>
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF" class="deviceWidth">
  <tr>
    <td height="10" colspan="3" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td width="25">&nbsp;</td>
    <td><table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td><img class="deviceWidth" src="http://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
        </tr>
        <tr>
          <td bgcolor="#f0d7c1"><table cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td width="28"></td>
                <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">“TAG saves you time as a business owner because you are not having to work with a graphic designer and do all those things. TAG is doing the footwork that the business owner needs for the materials we want.” </td>
                    </tr>
                    <tr align="right">
                      <td height="40" valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Cindy Ebanks, Owner<br />
                        New England Nightingales Home Care Services LLC, Connecticut </td>
                    </tr>
                  </table></td>
                <td width="28"></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td><img class="deviceWidth" src="http://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57" style="display:block;" /></td>
        </tr>
      </table></td>
    <td width="25">&nbsp;</td>
  </tr>
</table>

 </td>
                </tr>

            </table>
<!--Testimonial End-->

            <div style="height:15px">&nbsp;</div><!-- spacer -->

			


			<!-- 4 Columns -->
			<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
				<tr>
					<td bgcolor="#363636" style="padding:30px 0">
                        <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                            <tr>
                                <td>
                                        <table width="45%" cellpadding="0" cellspacing="0"  border="0" align="left" class="deviceWidth">
                                            <tr>
                                                <td valign="top" style="font-size: 11px; color: #f1f1f1; color:#999; font-family: Arial, sans-serif; padding-bottom:20px" class="center">

                                                    You are receiving this email because<br/>
                                                    1.) You're an awesome customer of "Company Name" or<br/>
                                                    2.) You subscribed via <a href="" style="color:#999;text-decoration:underline;">our website</a><br/>

                                                    <br/><br/>
                                                    Want to be removed? No problem, <a href="" style="color:#999;text-decoration:underline;">click here</a> and we won't bug you again.

                                                </td>
                                            </tr>
                                        </table>

                                        <table width="40%" cellpadding="0" cellspacing="0"  border="0" align="right" class="deviceWidth">
                                            <tr>
                                                <td valign="top" style="font-size: 11px; color: #f1f1f1; font-weight: normal; font-family: Georgia, Times, serif; line-height: 26px; vertical-align: top; text-align:right" class="center">

                                                    <a href=""><img src="http://www.emailonacid.com/images/emails/5_13/footer_rss.gif" width="42" height="42" alt="RSS Feed" title="RSS Feed" border="0" /></a>

                                                    <a href=""><img src="http://www.emailonacid.com/images/emails/5_13/footer_twitter.gif" width="42" height="42" alt="Twitter" title="Twitter" border="0" /></a>

                                                    <a href=""><img src="http://www.emailonacid.com/images/emails/5_13/footer_vm.gif" width="42" height="42" alt="Vimeo" title="Vimeo" border="0" /></a>

                                                    <a href=""><img src="http://www.emailonacid.com/images/emails/5_13/footer_fb.gif" width="42" height="42" alt="Facebook" title="Facebook" border="0" /></a>
                                                    <br />

                                                    <a href="#"><img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/footer_logo2.jpg" alt="" border="0" style="padding-top: 5px;" /></a><br/>
                                                    <a href="#" style="text-decoration: none; color: #848484; font-weight: normal;">555-555-5555</a><br/>
                                                    <a href="#" style="text-decoration: none; color: #848484; font-weight: normal;">email@email.com</a>
                                                </td>
                                            </tr>
                                        </table>

                        		</td>
                        	</tr>
                        </table>                                                              		
                    </td>
                </tr>
            </table><!-- End 4 Columns -->
						
		</td>
	</tr>
</table> <!-- End Wrapper -->

</body>
</html>

Any help on this would be greatly appreciated it. I cannot figure out what I am missing to make the “tables” go to the edge of the mobile device.

Hi,

I think I may be misunderstanding the question but the white at the sides is because you have set the table to be 280px width so on a 320px device there will be 20px each side. Set the table to 100% wide and it will fill to the edges.


body[yahoo] .deviceWidth {
[B]	width:100%!important;[/B]
	padding:0;
}

However none of that will work unless you add the viewport meta tag.


<meta name="viewport" content="width=device-width, initial-scale=1.0">