Mobile email not filling the screen

HTML & CSS
1

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">&nbsp;</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">&nbsp;</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">&nbsp;</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 &rarr;</a></td>
</tr>
</table>

</td>
				</tr>
			</table><!--End Button-->

<div style="height:35px">&nbsp;</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">&nbsp;</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">&nbsp;</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.

2

HI,

You missed a deviceWidth class from one of the tables so it is still 600px wide.

Add the class here to the table element:


	<!-- End 2 Column Images & Text Side by SIde --> 
						
						<!--Button-->
						
						<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" [B]class="deviceWidth">
								<tr>
										<td width="100%" bgcolor="#ffffff"><table cellspacing="0" border="0" cellpadding="0[/B]" 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 &rarr;</a></td>
														</tr>
												</table></td>
								</tr>
						</table>
						
						<!--End Button-->
3

Worked perfect. Thank You very much.

4

Another question if you dont mind. I have searched and not sure if I am putting in the right search terms.

I would like that a line of code is one place on web, but moves below the content on mobile… (for example, the top phone number)

Know of anywhere I can read on that?

5

Hi,

The easiest solution would be to add another div at the bottom of the page and put the telephone number there. You can then set it to display:none by default for desktop and then in the media query for smaller screens you set it back to display:block and then set the one at the top to display:none.

There are other ways to move things around but as email support for html is bad its safer to just add the extra div and then in the worst case you just get a phone number at the top and the bottom rather than something misplaced.

6

Yep, that worked like a charm. Except in Outlook. It is displaying it in both places. I read that outlook does not recognize the “display:none” code. Is there anything else that can be done?

Here is what i have my code looking like and its working on everything but outlook.

	@media only screen and (max-device-width: 479px) {
					#mobile {display:block}
					#desktop {display:none}
			}
 
/* Special Rules for Tablets */
	@media only screen and (min-device-width: 480px) {
					#mobile {display:none}
					#desktop {display:block}
			}

Then I just set an ID to what I want to be displayed.