I am trying to make it where my images and content fill the entire screen of a mobile device. For some reason I cannot figure it out.
Here is what it looks like on a mobile device.
Here is the code that 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>Make 2014 your most profitable year ever with PlayMaker CRM</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<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:295px!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">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#e6e6e7" height="31">
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 12px; color: #5f6062; font-family: Helvetica, sans-serif; text-align:center">
Can't see this email? <a href="http://playmakercrm.com/email/2014/1/web.html" style="text-decoration:underline; color:#214897">Click here</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height:20px"> </div><!-- spacer -->
<table width="600" 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">
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td class="deviceWidth" style="font-size: 16px; color: #191a1d ; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; vertical-align: top;">
Ready to see a free demo? <span style="color: #ab1620">1-866-930-6847</span>
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table>
<div style="height:20px"> </div><!-- spacer -->
<!-- Start Header-->
<table width="600" 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">
<img src="http://playmakercrm.com/email/2014/Mobile/logo.png" alt="" border="0" >
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td class="center" style="font-size: 17px; font-style:italic; color: #959595; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; line-height: 26px; padding-top:40px">
Sales Innovation for Home Care
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- One Column -->
<table width="600" 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://playmakercrm.com/email/2014/1/divider.png" alt="" border="0" style="display: block; border-radius: 4px;" /></a>
</td>
</tr>
</table><!-- End One Column -->
<div style="height:15px"> </div><!-- spacer -->
<!-- 2 Column Images & Text Side by SIde -->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="center" class="center" style="padding-top:70px">
<a href="#"><img width="286" src="http://playmakercrm.com/email/2014/1/calendar-target.png" alt="" border="0" style="border-radius: 4px; width: 267px; display: block;" class="deviceWidth" /></a>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 12px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<p style="font-size: 18px; color: #191a1d; font-weight: normal; text-align: left; margin-bottom:-5px; font-family: Helvetica, sans-serif;">~Contact.FirstName~,</p>
<p style="font-size: 18px; color: #191a1d; font-weight: normal; text-align: left; line-height:24px; font-family: Helvetica, sans-serif; ">Still wondering how you’ll grow your home care referrals in 2014?</p>
<p style="font-size: 31px; color: #ab1620; font-weight: normal; text-align: left; line-height:36px; font-family: Helvetica, sans-serif; margin:-3px 0">Make a new year’s <span style="font-style:italic">revolution</span> with PlayMaker CRM</p>
<p style="font-size: 14px; color: #646468; font-weight: normal; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">Get the proven, must-have home care sales tool to help you increase your referrals and dominate your competition.</p>
<p style="font-size: 14px; color: #191a1d; font-weight: bold; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">Contact us today for your free demo and make 2014 your most profitable year ever!</p> <br/><br/>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images & Text Side by SIde -->
<!--Button--><table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" bgcolor="#ffffff">
<table cellspacing="0" border="0" cellpadding="0" width="260" align="center">
<tr>
<td height="50" bgcolor="#FFA500" style="border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; font-size: 16px; font-family: sans-serif; color: #FFFFFF; margin: 0; padding: 0; text-align: center;" class='vero-editable'><a href="http://playmakercrm.com/demo/" style="font-weight:bold; text-decoration:underline;color: #ffffff;text-decoration:none;">Request your free demo →</a></td>
</tr>
</table>
</td>
</tr>
</table><!--End Button-->
<div style="height:35px"> </div><!-- spacer -->
<!-- One Column -->
<table width="600" 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://playmakercrm.com/email/2014/1/divider.png" alt="" border="0" style="display: block; border-radius: 4px;" /></a>
</td>
</tr>
</table><!-- End One Column -->
<div style="height:15px"> </div><!-- spacer -->
<!-- 2 Column Images - text left -->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="padding:10px 0">
<table align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="right" class="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family:Helvetica, sans-serif; font-size:11px; color:323338; text-align:left; line-height:15px;"><a href="#"><img width="220" src="http://playmakercrm.com/email/2014/1/vna-logo.png" alt="" border="0" style="padding-bottom:18px;border-radius: 4px; width: 220px; display: block;" class="deviceWidth" /></a>
<b>Joseph Allen</b><br>
Director of Business Development<br>
VNA California</p>
</td>
</tr>
</table>
<table align="right" width="40%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td width="5%"></td>
</tr>
</table>
<table align="left" width="60%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size: 14px; font-style:italic; color: #959595; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; line-height: 26px">
What I was really looking for in a CRM is something that would make us more efficient in general, and I found it with PlayMaker CRM. Year to date we have increased our referrals by 2,000 over the prior year. <br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="padding:10px 0">
<table align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="right" class="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family:Helvetica, sans-serif; font-size:11px; color:323338; text-align:left; line-height:15px;"><a href="#"><img width="220" src="http://playmakercrm.com/email/2014/1/immediate-logo.png" alt="" border="0" style="padding-bottom:18px;border-radius: 4px; width: 220px; display: block;" class="deviceWidth" /></a>
<b>Cheryl Peltekis, RN</b><br>
Clinical Director<br>
Immediate Homecare and Hospice</p>
</td>
</tr>
</table>
<table align="right" width="40%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td width="5%"></td>
</tr>
</table>
<table align="left" width="60%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-size: 14px; font-style:italic; color: #959595; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; line-height: 26px">
I could not imagine if I had to work without PlayMaker today. I feel they truly are my business partner because they really do accommodate the requests and the needs that I have. They really just go above and beyond. They wow me. <br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images - text left -->
<div style="height:25px"> </div><!-- spacer -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%" bgcolor="#e6e6e7" height="57">
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 12px; color: #5f6062; font-family: Helvetica, sans-serif; text-align:center">
<img src="http://playmakercrm.com/email/2014/1/inc500.png" width="170" height="45"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 4 Columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#323338" style="padding:30px 0">
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<table width="78%" 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">
© 2014 PlayMaker CRM. All rights reserved.<br/>
866.930.6847 | <a href="http://playmakercrm.com/demo/" style="color:#9fa1a4;text-decoration:underline;">playmakercrm.com</a>
</td>
</tr>
</table>
<table width="22%" cellpadding="0" cellspacing="0" border="0" align="right" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 14px; color: #ffffff; font-weight: bold; font-family: Helvetica, sans-serif; text-align:left; line-height:15px; vertical-align: top; text-align:left" class="center">
Connect with us!<br>
<a href="http://twitter.com/playmakercrm" target="_blank"><img src="http://playmakercrm.com/email/2014/1/twitter.png" width="36" height="36" alt="Twitter" title="Twitter" border="0" style="padding:5px 7px 5px 0" /></a>
<a href="http://www.facebook.com/playmakercrmhomecare" target="_blank"><img src="http://playmakercrm.com/email/2014/1/facebook.png" width="36" height="36" alt="Facebook" title="Facebook" border="0" style="padding:5px 7px 5px 0" /></a>
<a href="http://www.linkedin.com/company/playmaker-crm" target="_blank"><img src="http://playmakercrm.com/email/2014/1/linkedin.png" width="36" height="36" alt="LinkedIn" title="LinkedIn" border="0" style="padding:5px 0 " /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 4 Columns -->
</td>
</tr>
</table> <!-- End Wrapper -->
</body>
</html>
Here is the pages url
http://playmakercrm.com/email/2014/Mobile/1.html
Any help would be greatly appreciate it.