Recently I have been working on a contact form for my portfolio website. The form works and I have managed to successfully send HTML mail from the server it’s hosted on to my email address. Like most of my emails, these will be primarily read on my iPod Touch so the theme I based the mail template on is engineered for a screen 320px by 480px.
Even though the mail container element is set to width:100% and the same on all inner elements, there is a ~20px gap at the right side of the screen, as if that’s the edge of the document:
Here is the script and style-sheet for reference:
PHP (snippet), request_form.php:
...
$email_subject = "Graphic Request - ".clean_string($first_name);
$email_message .= '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/><link rel="stylesheet" href="http://blieque.comli.com/mail-styles.css" type="text/css"></head><body><table id="all" cellspacing="0" cellpadding="0">';
$email_message .= '<tr><td id="head"><h1>New Request</h1></td></tr>';
$email_message .= '<tr><td class="info"><span id="param">Name:</span> '.clean_string($first_name).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Email Address:</span> '.clean_string($email_from).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Service:</span> '.clean_string($service).'</td></tr>';
$email_message .= '<tr><td class="info sub jstfy"><span id="param">Details:</span> '.clean_string($request).'</td></tr>';
$email_message .= '<tr><td id="foot"></td></tr></table></body></html>';
...
CSS, mail-styles.css:
body {
margin: 0 !important;
font-family: Arial, Helvetica, sans-serif;
color: #242424 !important;
text-decoration: none !important;
}
#all {
width: 110%;
}
#head {
background: #1393A1;
color: #61BDC7;
border-bottom: solid 0.5em #61BDC7;
width: 100%;
padding: 1em 0.5em;
height: 20px;
}
td.sub {
border-top: solid 0.25em #1393a1;
}
td.info {
padding: 0.35em 0.5em;
font-size: 12pt;
}
td.jstfy {
text-align: justify;
}
span#param {
color: #1393a1;
font-weight: bold;
}
td[class=info] {
text-transform: capitalize;
}
#foot {
background: #1393a1;
width: 100%;
height: 20px;
color: transparent;
border-top: solid 0.5em #61BDC7;
}
#line {
background: #1393a1;
width: 94%;
height: 0.25em;
margin-left: auto;
margin-right: auto;
}
The email also doesn’t work well with online email viewers as they tend to have their own overriding style-sheets for common tags like <h1>. I hope the solution is something obvious.
You could try adding min-width: 100% to the
<body>element to deal with the gap.And as the others suggested, moving your styles inline should deal with the rest of your problems.