I can not get the background images to work in Outlook HTML newsletter. I tried bulletproof method, but it is not working as it supposed to be!
Please check out my code to see if you have any ideas how to display 3 different background images correctly in Outlook. This is what I have at the moment (and it works flawlessly everywhere but Outlook)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>E-mail newsletter</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport">
<style type="text/css">
/* Reset */
body { margin: 0px; padding: 0px; background-color: #FFFFFF; }
::selection {
background: #ff2f2f; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ff2f2f; /* Gecko Browsers */
}
/* Responsive */
#media only screen and (max-width:600px) {
/* Tables
parameters: width, alignment, padding */
table[class=scale] { width: 100%!important; }
table[class=scale-300] { width: 100%!important; height: 300px!important; }
table[class=scale-90] { width: 90%!important; }
/* Td */
td[class=hide] { display: none!important; height: 0px!important; }
td[class=scale-left] { width: 100%!important; text-align: left!important;}
td[class=scale-height] { height: 70px!important;}
td[class=scale-left-bottom] { width: 100%!important; text-align: left!important; padding-bottom: 24px!important; }
td[class=scale-left-top] { width: 100%!important; text-align: left!important; padding-top: 24px!important; }
td[class=scale-left-all] { width: 100%!important; text-align: left!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center] { width: 100%!important; text-align: center!important;}
td[class=scale-center-both] { width: 100%!important; text-align: center!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-bottom] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; }
td[class=scale-center-top] { width: 100%!important; text-align: center!important; padding-top: 24px!important; }
td[class=scale-center-all] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-right] { width: 100%!important; text-align: right!important;}
td[class=scale-right-bottom] { width: 100%!important; text-align: right!important; padding-bottom: 24px!important; }
td[class=scale-right-top] { width: 100%!important; text-align: right!important; padding-top: 24px!important; }
td[class=scale-right-all] { width: 100%!important; text-align: right!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center-bottom-both] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-top-both] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=reset] { height: 0px!important; }
td[class=scale-center-topextra] { width: 100%!important; text-align: center!important; padding-top: 84px!important; }
img[class="reset"] { display: inline!important; }
img[class="scale-80"] { width: 80%!important; }
}
</style>
</head>
<body>
<table class="scale" data-bgcolor="Body BG" data-module="Header" style="background-color: rgb(255, 255, 255); position: relative; opacity: 1; top: 0px; left: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="color:#444444; font-family:Helvetica, Verdana, Arial, sans-serif; font-size:13px; padding:50px 0px 20px 0;">
Can't see the offer? Click here! </td>
</tr>
<tr>
<td>
<table class="scale" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-image: url("http://s30.postimg.org/s36pgisoh/bg1.jpg");" data-bg="Quote BG" align="center" height="340" background="http://s30.postimg.org/s36pgisoh/bg1.jpg" border="0" cellpadding="0" cellspacing="0" width="620">
<tr>
<td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s10.postimg.org/u2e99laih/cut_top.png">
</td>
</tr>
<tr>
<td align="center">
<table class="scale" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tr>
<td height="50">
</td>
</tr>
<tr>
<td data-color="Header Headline" data-max="64" data-min="16" data-size="Header Headline" style="font-family: "Proxima N W01 At Smbd",Helvetica,Arial,sans-serif; font-size: 29px; color: rgb(255, 255, 255); line-height: 42.05px;" align="center">BEST OFFER HERE!<br><br><span data-color="Header Subline" data-max="50" data-min="16" data-size="Header Subline" style="font-size: 38px; line-height: 38px; color: rgb(255, 255, 255);">STARTS FROM <strong>35 EUR</strong>!</span>
</td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td style="color: rgb(255, 255, 255); font-size: 15px; line-height: 25.5px;" data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" align="center"><a data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" data-bgcolor="Header Button" href="http://webpage.com" style="background-color: rgb(219, 0, 19); border-radius: 40px; padding: 10px 30px; color: rgb(255, 255, 255); font-family: "Proxima N W01 At Smbd",Helvetica,Arial,sans-serif; text-decoration: none; font-size: 15px; line-height: 25.5px;">ORDER NOW <img src="http://s11.postimg.org/nk238dn6n/nool.png" height="10px" width="11px" alt=""></a>
</td>
</tr>
<tr>
<td height="50">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s27.postimg.org/f9g57wpgz/cut_down.png">
</td>
</td>
</tr>
</table></tr>
</table></body></html>
</body></html>
background-image is not supported in outlook, sorry for you.
Take a look here about css compatibility in email clients: https://www.campaignmonitor.com/css/
Using html and css in email it's very very difficult.
Every single email client reading your email is going to have it's own rules about how it deals with HTML emails, so you are going to have to design for the lowest common denominator.
Related
I'm coding an email, and the hero image is misaligned slightly and only in Outlook.
I've seen and tried some answers to this question already (Setting the font size to 0, removing the "margin", adding another table just for the image), but all of the answers were several years old. I think there's a new update in Outlook that is causing this issue.
My code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
}
</style>
<![endif]-->
</head>
<body style="background-color:#eeeeee; Margin:0; padding:0; min-width:100%;">
<style type="text/css">
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
*[class=mobile]{display:none;}
#media only screen and (max-width:650px) {
*[class=desktop]{display:none !important;
background:none!important;}
}
#media only screen and (max-width: 649px) {
*[class="column"],
*[class="two-column"] {
width: 100%!important;
max-width: 649px!important;
}
*[class="rightrail"] {
max-width: 100%!important;
}
*[class="rightrail"] img {
width: 100%!important;
}
*[class="nomobile"] {
overflow: hidden !important;
float: none !important;
display: none !important;
line-height:0% !important;
}
}
#media only screen and (max-width: 500px) {
[class*=wrapper] .app {
width: 70%!important;
}
[class*=wrapper] .app-text span {
font-size:15px!important;
font-weight:bold;
}
[class*=wrapper] .app-text span span {
font-size:7px!important;
font-weight:bold;
}
*[class=desktop]{
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
text-align: center;!Important;
}
div[class=desktop]{
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
margin: 0 auto!important;
text-align:center!important;
}
*[class="mobileonly"] {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
}
*[class=desktop] table {
display: inline-block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
width: 100%!important;
text-align: center!Important;
margin: 0 auto;
max-width: 140px!important;
}
*[class="padding"] {
padding: 0 5% !important;
}
*[class=desktop] a {
display:block!important;
font-size: 14px!important;
max-height: 100%!important;
line-height: 20px!important;
padding: 8px 20px!important;
}
*[class="column"],
*[class="two-column"] {
width: 90%!important;
}
}
</style>
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; background-color: #eeeeee">
<br class="nomobile">
<!--Pre Header-->
<div class="header" style="max-width:650px;">
<!--[if (gte mso 9)|(IE)]>
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px;">
<tr>
<td style="width: 100%; text-align:center; font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
<tr>
<td width="25"> </td>
<td width="600" valign="top">
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="25"> </td></tr></table>
<![endif]--></td>
</tr>
</table>
</div>
<!--Header-->
<div class="header" style="max-width:650px;">
<!--[if (gte mso 9)|(IE)]>
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px; background-color: #0079c2;">
<tr>
<td style="width: 100%; text-align:center; font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
<tr>
<td width="25"> </td>
<td width="600" valign="top">
<![endif]-->
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<div style="width:90%; display:inline-block; vertical-align:top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;" >
<tr>
<td width="100%" class="inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0; padding: 0; margin: 0" >
<tr>
<td width="100%" class="inner"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0; padding: 0; margin: 0" >
<tr>
<td width="30%" align="left"><img src="http://image.bcbst-email.com/lib/fe9612717c60077f75/m/1/logo-white_2.png" alt="BlueCross BlueShield of Tn" width="134" height="55" border="0" style="display: block; max-width: 134px; color: #ffffff; background: #0079C2; font-size:9px;"/></td>
<td width="55%" align="right"><p style="font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color:#ffffff; mso-line-height-rule:exactly; line-height: 12px;">View Online</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if !(gte mso 9)|(IE)]>
<div style="width:5%; display:inline-block; vertical-align:top; mso-hide: all!important;"> </div>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="25"> </td></tr></table>
<![endif]--></td>
</tr>
</table>
</div>
<!--Header-->
<!--Hero Image-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing: 0; width: 100%; max-width:650px!important; padding: 0 auto;">
<tr>
<td><img src="http://image.bcbst-email.com/lib/fe9612717c60077f75/m/1/Health+Foundation+Header+V2.jpg" style="width:100%; display:block; max-width: 650; color: #0079C2; font-weight:bold; background: #ffffff; font-size:14px;" alt="A New Focus for our Health Foundation" border="0" width="100%" class="hero"></td>
</tr>
</table>
<!--Hero Image-->
I have this CSS Cheatsheet that will reset most of the styles across different email providers, add it before any of your styles
/* Client-specific Styles */
#outlook a {
padding: 0;
}
/* Force Outlook to obtain a "view in browser" menu link. */
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing.*/
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table td {
border-collapse: collapse;
}
.removemobile {
display: none;
}
/*STYLES*/
/*################################################*/
/*IPAD STYLES*/
/*################################################*/
#media only screen and (max-width: 612px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #ffffff;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
td[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
table[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
td[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
table[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="logo"] {
width: 100%!important;
float: left;
text-align: center;
margin-bottom: 20px;
}
td[class="menu"] {
width: 100%!important;
float: left;
}
table[class=fullspread] {
width: 100%!important;
clear: both;
}
table[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="buttoncenter"] {
float: none!important;
text-align: center!important;
display: inline-block!important;
clear: both;
}
img[class="imageinline"] {
display: inline!important;
}
img[class="fullwidth"] {
display: inline!important;
width: 100%!important;
}
td[class="paddingtop"] {
padding-top: 15px!important;
}
.buttonleft {
display: inherit!important;
}
.removemobile {
width: 100%!important;
display: block;
}
table[class="halfwidth"] {
width: 50%!important;
}
table[class="mghide"] {
display: none!important;
}
td[class="mghide"] {
display: none!important;
}
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #ffffff;
/* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
td[class=devicewidth] {
width: 100%!important;
text-align: center!important;
}
table[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
td[class=devicewidthinner] {
width: 92%!important;
text-align: center!important;
float: none!important;
margin: auto!important;
}
table[class=fullspread] {
width: 100%!important;
clear: both;
}
table[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=fullwidth] {
width: 100%!important;
text-align: center!important;
clear: both;
}
table[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class=centered] {
width: 100%!important;
text-align: center!important;
clear: both;
}
td[class="logo"] {
width: 100%!important;
float: left;
text-align: center;
margin-bottom: 20px;
}
td[class="menu"] {
width: 100%!important;
float: left;
}
td[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="aligncenter"] {
width: 100%!important;
text-align: center!important;
}
table[class="buttoncenter"] {
float: none!important;
text-align: center!important;
display: inline-block!important;
clear: both;
}
img[class="imageinline"] {
display: inline!important;
}
img[class="fullwidth"] {
display: inline!important;
width: 100%!important;
}
td[class="paddingtop"] {
padding-top: 15px!important;
}
.buttonleft {
display: inherit!important;
}
.removemobile {
width: 100%!important;
display: block;
}
table[class="halfwidth"] {
width: 50%!important;
}
table[class="mghide"] {
display: none!important;
}
td[class="mghide"] {
display: none!important;
}
}
</style>
Trying to figure out why my <textarea id='customer-title'> is not expanding wider than 216px and producing 3-4 rows???
I am in need of the element to be 4-5 rows in size and stretch to <table id='meta'>. Would also like #address to be same width.
I have working example in JSFiddle - css problem
CSS:
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
/*#address { width: 250px; height: 150px; float: left; }*/
#address { width: 250px; height: 150px; font: 20px "Comic Sans"; font-weight: bold; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 340px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
HTML:
<body>
<form action="insert.php" id="testinsert" method="POST">
<input type="submit" value="Submit" />
</form>
<div id="page-wrap">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea form ="testinsert" name="address" id="address">Business Name
Address 1
Address 2
Phone: (000) 555-1212</textarea>
<div id="logo">
<div id="logoctr">
Change Logo
Save
|
Delete Logo
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/CM_LOGO.JPG" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea form ="testinsert" name="customer" id="customer-title">Customer Name Incorporated
c/o Person to Contact</textarea>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$735.00</div></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea>Hourly Rate</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea>Business Rate: Consulting/Labor/Installs</textarea></td>
<td><textarea class="cost">$150.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">$450.00</span></td>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea>Hourly Rate</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea>Residential Rate: Consulting/Labor/Installs</textarea></td>
<td><textarea class="cost">$95.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">$285.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$735.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$735.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">$735.00</div></td>
</tr>
</table>
<input type="hidden" form ="testinsert" name="xdate" id="xdate"></input>
<input type="hidden" form ="testinsert" name="sales" id="sales"></input>
<input type="hidden" form ="testinsert" name="owed" id="owed"></input>
<input type="hidden" form ="testinsert" name="deducted" id="deducted"></input>
<div id="terms">
<h5>Terms</h5>
<textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
</div>
</div>
If you explicitly define the width in your css the text area will expand to the size of the div it is in.
#customer-title {
font-size: 20px;
font-weight: bold;
float: left;
width: 100%;
}
You can change the width of the address as well if you want it to take up the entire space of its parent container:
#address {
width: 100%;
height: 150px;
font: 20px "Comic Sans";
font-weight: bold;
float: left;
}
Had to adjust for the parent div:
#identity{
left: 50%;
top: 50%;
margin-left:-210px;
margin-top:-255px;
}
I want the .menu-box-middle ul list items to display inline, however all the list items overlap each other! I can't figure out how to change it. Ideally I want them evenly spaced across the page within the main-container.
HTML and CSS can be found here: http://codepen.io/anon/pen/Mbbbmv
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Anthony and Nicola's wedding</title>
<link href="tplcss/samplestyle/style.css" rel="stylesheet" type="text/css" />
<link href="http://default.gettingmarried.co.uk/src/css/common.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://default.gettingmarried.co.uk/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="http://default.gettingmarried.co.uk/src/js/common.js"></script>
<script src="http://default.gettingmarried.co.uk/src/js/prototype-1603-minified.js" type="text/javascript"></script>
<script src="http://default.gettingmarried.co.uk/src/editjs/src/scriptaculous.js" type="text/javascript"></script>
<meta name="description" content="Nicola Bobins and Anthony Cross are getting married on Wednesday 13th January 2010." />
<meta name="keywords" content="wedding,Anthony,Nicola,Nicola Bobins and Anthony Cross,wedding site,www.gettingmarried.co.uk,Anthony and Nicola's wedding" />
<script src="http://default.gettingmarried.co.uk/src/sifr436/js/sifr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://default.gettingmarried.co.uk/src/sifr436/css/sifr.css" type="text/css">
<!-- font: This part is editable via your control panel -->
<SCRIPT LANGUAGE="JavaScript">
var myfont = { src: 'http://default.gettingmarried.co.uk/src/sifr436/fonts/PalaceScriptMT[regular]436.swf' };
sIFR.activate(myfont);
sIFR.replace(myfont, {
selector: 'h1',wmode: 'transparent',
css: [ '.sIFR-root {color: #000000 ;font-size: 60px;}' ]
});
</SCRIPT>
</head>
<body>
<!-- Overlay shaded div for hover window -->
<div id="overlayfilm" style="display:none"></div>
<div class="main-container">
<div class="top-thin-bar"><span class="main-table-top-banner"><strong>Wednesday 13th January 2010 - </strong> 52 days to go</span></div>
<!-- <div id="weatherbox">10 days before?<br />
<br />
Show weather here!</div> -->
<div class="left-panel">
<div class="menu-box-top1"></div>
<div class="menu-box-middle">
<ul>
<li>The Wedding
<ul id="Aitem_list">
<li id="Aitem_65" class="selected">
<a href="Home.htm" title="Home" class="menu">Home
</a>
</li>
<li id="Aitem_66" >
<a href="About_Us.htm" title="About Us" class="menu">About Us
</a>
</li>
<li id="Aitem_68" >
<a href="Reception.htm" title="Reception" class="menu">Reception
</a>
</li>
<li id="Aitem_67" >
<a href="Ceremony.htm" title="Ceremony" class="menu">Ceremony
</a>
</li>
<li id="Aitem_69" >
<a href="Timetable.htm" title="Timetable" class="menu">Timetable
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-box-bottom1"></div></div>
<div class="right-panel" id="right-panel-frame">
<div class="intro-panel"> <h1>Our Wedding</h1><img height="333" border="0" align="right" width="250" class="photo-align-right" alt="image" src="http://www.gettingmarried.co.uk/siteimages/thumbnail_200903021623420000006dfda5a286177a3903c2c31b11c20bb4.jpg"/> <span id='homepage_intro'>This is a sample file that contains most elements that you may require to create a new CSS style.<br><br>Sadly we are unable to change the HTML template layout, but the CSS file is fully editable by you.<br><br>Once you have finished, please email the files as a ZIP archive to support#gettingmarried.co.uk. We will then import your CSS style into the GettingMarried.co.uk system.<br><br>Please note: by sending us your CSS file and images, you agree to transfer any copyright or ownership of the design to GettingMarried.co.uk. You also confirm that you have not used any copyrighted images without permission from the copyright holder. You will accept full liability for breach of copyright. You also confirm that your CSS file may be used on our other members' sites, and by sending us your files, you are confirming your agreement of these terms and conditions.</span><br/>
<br style="clear:both;">
</div>
<div class="front-page-boxes-wrapper">
<div class="front-page-boxes-left">
<p><em>The Wedding</em></p>
<p class="front-page-boxes-text">My Wedding box testing</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-middle">
<p><em>Organisation</em></p>
<p class="front-page-boxes-text">My wedding box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-right">
<p><em>Memories</em></p>
<p class="front-page-boxes-text">My Wedding Box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
</div>
<!-- ABOUT US -->
<h1>About Us</h1>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Penny</strong></p>
<p><img height="147" align="left" width="100" alt="Penny" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-bride-100px.jpg"/><span id="about_bride" >Age: 26<br/><br/>Middle Name: Rose<br/><br/>Likes: Bunting! <br/><br/>Dislikes: Getting up in the morning </span></p></td>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Andrew</strong></p>
<p><img height="147" align="left" width="100" alt="Andrew" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-groom-100px.jpg"/><span id="about_groom" >Age: 27<br/><br/>Middle Name: Donald<br/><br/>Likes:Everything to be tidy<br/><br/>Dislikes: Penny's Topshop Account </span></p></td>
</tr>
</table>
<p><strong>How we met...</strong></p>
<span id="about_howmet" >Way way back at guide and scout camp in 1995 </span><p></p>
<p><strong>The proposal...</strong></p>
<span id="about_proposal" >Sleep deprived and slightly drunk on mojitos in Cuba, December 2007 </span><p></p>
<!-- GIFT LIST -->
<h1>Gift List</h1>
<p><span id="giftlist_intro" >Introduction text for the giftlist page.</span></p>
<p><strong>The Online Gift List</strong></p>
<p>Please remember to click the "Mark as purchased" link to mark items as purchased to prevent duplications.</p>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td class="giftlist-header-row">Shop Name</td>
<td class="giftlist-header-row">Description</td>
<td class="giftlist-header-row">Cost</td>
<td class="giftlist-header-row">Quantity</td>
<td class="giftlist-header-row">Options</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Argos.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1966" onclick="JT_show('ajax-purchase-giftview.php?giftid=1966&gifturl=giftgo.php%3Fid%3D1966',this.id,this.name);" name="Did you buy this Gift?" id="giftID1966">3 tier steamer</a></td>
<td class="giftlist-row-purchased">£19.99</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3031" onclick="JT_show('ajax-purchase-giftview.php?giftid=3031&gifturl=giftgo.php%3Fid%3D3031',this.id,this.name);" name="Did you buy this Gift?" id="giftID3031">Black 19cm rectangular stoneware dish</a></td>
<td class="giftlist-row-purchased">£15</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1963" onclick="JT_show('ajax-purchase-giftview.php?giftid=1963&gifturl=giftgo.php%3Fid%3D1963',this.id,this.name);" name="Did you buy this Gift?" id="giftID1963">blue spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1960" onclick="JT_show('ajax-purchase-giftview.php?giftid=1960&gifturl=giftgo.php%3Fid%3D1960',this.id,this.name);" name="Did you buy this Gift?" id="giftID1960">blue spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Drinkstuff.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1859" onclick="JT_show('ajax-purchase-giftview.php?giftid=1859&gifturl=giftgo.php%3Fid%3D1859',this.id,this.name);" name="Did you buy this Gift?" id="giftID1859">Cocktail starter pack</a></td>
<td class="giftlist-row-purchased">£39.92</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Welch.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=2805" onclick="JT_show('ajax-purchase-giftview.php?giftid=2805&gifturl=giftgo.php%3Fid%3D2805',this.id,this.name);" name="Did you buy this Gift?" id="giftID2805">cookn=book stand - light blue</a></td>
<td class="giftlist-row-purchased">£27.25</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-rowa">Debenhams.com </td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">Cream piglets salt and pepper pots</a></td>
<td class="giftlist-rowa">£15.50</td>
<td class="giftlist-rowa">1</td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">View</a> | <a onclick="JT_show('ajax-purchase-gift.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);return false;" name="Please Confirm Your Details..." id="giftID3017" href="#">Mark as purchased</a></td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1962" onclick="JT_show('ajax-purchase-giftview.php?giftid=1962&gifturl=giftgo.php%3Fid%3D1962',this.id,this.name);" name="Did you buy this Gift?" id="giftID1962">cream spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1961" onclick="JT_show('ajax-purchase-giftview.php?giftid=1961&gifturl=giftgo.php%3Fid%3D1961',this.id,this.name);" name="Did you buy this Gift?" id="giftID1961">cream spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Lauraashley.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1696" onclick="JT_show('ajax-purchase-giftview.php?giftid=1696&gifturl=giftgo.php%3Fid%3D1696',this.id,this.name);" name="Did you buy this Gift?" id="giftID1696">duck egg bed linen - oxford pillowcases</a></td>
<td class="giftlist-row-purchased">£14.69</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3032" onclick="JT_show('ajax-purchase-giftview.php?giftid=3032&gifturl=giftgo.php%3Fid%3D3032',this.id,this.name);" name="Did you buy this Gift?" id="giftID3032">Granite petite round casserole dish</a></td>
<td class="giftlist-row-purchased">£10</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
</tbody></table>
</tbody></table>
<h1>Our Wedding</h1>
<p>Upload your high resolution wedding photos to Andrew and Penny's online photo album here. <br/><br/>Our site will automatically create web-friendly images, whilst the high resolution images will also be stored, allowing us to design a beautifully-printed photobook of our special day through our guests' eyes.</p>
<form action="uploadimages.php" method="POST" name="gbook">
<div class="front-page-boxes">
<strong>Upload your photos</strong> (Step 1 of 2)
<br/><table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Your name: </td>
<td><input name="name" type="text" id="name" size="30"/></td>
</tr>
<tr>
<td nowrap="nowrap">Email address: *</td>
<td><input name="email" type="text" id="email" size="30"/></td>
</tr>
<SCRIPT LANGUAGE="JavaScript">
<!--
function callme(){
var row = document.getElementById("showme");
if(document.gbook.usealbum.value=='0'){
row.style.display='';
}else{
document.gbook.newname.value='';
row.style.display='none';
}
}
//-->
</SCRIPT>
<tr>
<td nowrap="nowrap">Select destination album:</td>
<td>
<select name="usealbum" OnChange="callme();"><option>Please Select</option><option value='0' selected>Create a new photo album</option>
<option value="from your American " >Test album 1</option>
<option value="Scotty's photos of the big day" >Test album 2</option>
</select>
</td>
</tr>
<tr ID='showme' >
<td nowrap="nowrap">Title for your new album:</td>
<td><input name="newname" type="text" id="email" size="30"/></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"> </td>
<td align="left"><input type="submit" name="Submit" id="Submit" value="Go >" /></td>
</tr>
<tr>
<td colspan="3">
<font size="1">* Note: email address is stored <b>only</b> for Name1 and Name2's private use</font>
</td>
</tr>
</table>
</div>
</form>
<br/>Please note: all photos must be personally approved by us before they go live on the site, so there may be a slight delay before you see it in the albums.
</div>
<p> </p>
<br class="clearbreak" />
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* BASIC ELEMENTS */
/* NB: The h1 style is set up separately on the "customise design page" */
body {
background-image: url(../../tplcss/samplestyle/images/bg-small-2.gif);
background-repeat: repeat;
background-position: center;
padding-left: 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
a {
color: #1d192f;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #1d192f;
}
form {
margin: 0px;
padding: 0px;
}
.submit-button {
background-color: #FFFFCC;
margin-top: 10px;
border: 1px solid #DC5050;
height: 30px;
}
/* ----------- GENERAL ELEMENTS ---------------- */
.main-table {
background-color: #FFFFFF;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
padding: 0px;
}
.main-content {
padding-top: 30px;
padding-left: 25px;
padding-right: 15px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
.main-container {
background-color: #ffffff;
background-repeat: no-repeat;
background-position: 0px 0px;
width: 900px;
margin-top:-16px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
position: relative;
}
.main-container .top-thin-bar {
visibility: hidden;
background-repeat: no-repeat;
height: 22px;
width: 1100px;
top: 160px;
position: absolute;
background-position: 0px 0px;
text-align: center;
padding-top: 7px;
left: 0px;
margin-left: -122px;
font-size: 10pt;
}
.main-container .right-panel .intro-panel {
width: auto;
min-height: 333px;
font-size: 14px;
line-height: 20px;
color: #193429;
}
.main-footer {
width: 880px;
margin-right: auto;
margin-bottom: 0px;
background-repeat:no-repeat;
margin-left: auto;
height: 60px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #FFB9B9;
border-bottom-color: #FFB9B9;
border-left-color: #FFB9B9;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
clear: both;
}
.main-footer .left-links {
width:300px;
height:100%;
float:left;
}
.main-footer .right-logo {
visibility: hidden;
width:400px;
float:right;
text-align:right;
}
.left-panel {
width: auto;
margin-top: 15px;
padding-left: 20px;
margin-bottom: 20px;
}
.right-panel {
width: auto;
margin-top: 220px;
margin-right: 30px;
margin-bottom: 35px;
}
.leftmenu {
padding-left: 15px;
width: 200px;
padding-top: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
}
.clearbreak {
clear:both;
height:10px;
overflow:hidden;
}
.main-table-top-banner {
visibility: hidden;
text-align: center;
background-repeat: no-repeat;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #999999;
}
.main-table-top-banner-sub {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
}
.main-bottom-strip {
padding: 10px;
border-top: 1pt solid #CCCCCC;
background: #EEEEEE;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
}
.main-bottom-strip a {
color: #666666;
}
.main-bottom-strip a:visited {
color: #666666;
}
.main-bottom-strip a:hover {
color: #AAAAAA;
}
.table-light-padding {
padding: 3px;
padding-bottom: 7px;
}
.redtext {color: #DC5050}
.smaller-text-indent {
font-size: 10pt;
padding-left: 20px;
}
.text-indent {
padding-left: 20px;
}
.editingtextarea {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
background-color: #FFFFFF;
border: 1px dotted #E98E95;
}
/* Menu bar */
.menu-box-top1 {
height: 0px;
width: 180px;
background-repeat: no-repeat;
margin: 0px;
background-position: bottom;
}
.menu-box-middle {
background-color: #FFFFFF;
margin: 0px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 1px;
padding-left: 10px;
}
.menu-box-middle p {
font-style: italic;
padding-bottom: 0px;
}
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
.menu-box-middle a {
color: #E96461;
text-decoration: none;
border-bottom: 1px solid #b0c5bc;
line-height: 25px;
}
.menu-box-middle a:visited {
color: #E96461;
}
.menu-box-middle a:hover {
color: #EF8F8D;
}
.menu-box-bottom1 {
background-image: url(http://default.gettingmarried.co.uk/images/css-img/bottom-rounded.gif);
background-repeat: no-repeat;
width: 180px;
height: 10px;
margin: 0px;
}
/* ----------- FRONT PAGE ELEMENTS ------------- */
/* Front three boxes */
.front-page-boxes-wrapper {
float: right;
width: 640px;
margin-right: 0px;
margin-bottom: 40px;
margin-top: 20px;
height: 170px;
}
.front-page-boxes-wrapper em {
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color:#666666;
letter-spacing: 2px;
font-style: normal;
font-weight: bold;
}
.front-page-boxes-wrapper p {
margin-top:0;
}
.front-page-boxes {
border: 1px dotted #FFA8A8;
padding: 10px;
}
.front-page-boxes a {
color: #3399CC;
}
.front-page-boxes a:visited {
color: #3399CC;
}
.front-page-boxes a:hover {
color: #3399CC;
}
.front-page-boxes-text {
font-size: 10pt;
line-height: 18px;
color: #253630;
}
.front-page-boxes-left {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
height: 100%;
background-color: #D7EBFF;
color: #0066FF;
}
.front-page-boxes-middle {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background-color: #FADBDA;
}
.front-page-boxes-right {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background: #D7EBFF;
}
To make it work I have added following css styles and removed your old css styles:
Removed
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: block;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
Added Lines:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
Fiddler: https://jsfiddle.net/mayankN/nrL32cen/1/
Make the changes relevant to your style from old file.
Just add a margin on :
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
margin:12px;
}
http://codepen.io/anon/pen/dOGWQW
Screenshots of what is wrong:
http://imgur.com/a/JjNLn
No matter what I try to change, I can't get the part that says "May we suggest", or below that where it says "Want more products?", to be centered in gmail's mobile app.
If you turn the phone in landscape mode it all displays right, but with the normal vertical view the width of the block is not 100% even though the text is still centered.
Then the footer text is just text aligned left for some reason.
On gmail.com on Chrome mobile, the whole template looks like its not at all designed for mobile and is full desktop width.
How do I debug this?
I can't use any kind of dev tool in these programs and nothing I can think of in the code should be making it do this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
/* Basics */
body {
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #fff;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #123050;
}
td {
padding: 0;
}
table, tbody, tr, td {
border: none;
border-color: #fff;
}
img {
border: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
border: 1px solid #e1e1e1;
box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.15);
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
background: #fff;
}
.inner {
padding: 10px;
}
.contents {
width: 100%;
}
p {
Margin: 0;
}
a {
color: #ed9d2a;
text-decoration: none;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
/* One column layout */
.one-column .contents {
text-align: left;
}
.one-column p {
font-size: 14px;
Margin-bottom: 10px;
}
/*Two column layout*/
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.two-column .contents {
font-size: 14px;
text-align: left;
border:1px solid #dedede;
border-radius: 3px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
}
.two-column img {
width: 100%;
max-width: 280px;
height: auto;
}
.two-column .image {
padding: 9px 5px 0;
}
.two-column .text {
padding: 0 5px 17px;
padding-top: 10px;
}
/*Three column layout*/
.three-column {
text-align: center;
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.three-column .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
}
.three-column img {
width: 100%;
max-width: 180px;
height: auto;
}
.three-column .contents {
font-size: 14px;
text-align: center;
}
.three-column .text {
padding-top: 10px;
}
/* Left sidebar layout */
.left-sidebar {
text-align: center;
font-size: 0;
}
.left-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.left-sidebar .left {
max-width: 100px;
}
.left-sidebar .right {
max-width: 500px;
}
.left-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.left-sidebar .contents {
font-size: 14px;
text-align: center;
}
.left-sidebar a {
color: #85ab70;
}
/* Right sidebar layout */
.right-sidebar {
text-align: center;
font-size: 0;
}
.right-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.right-sidebar .left {
max-width: 100px;
}
.right-sidebar .right {
max-width: 500px;
}
.right-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.right-sidebar .contents {
font-size: 14px;
text-align: center;
}
.right-sidebar a {
color: #70bbd9;
}
h2.featured {
font-size: 39px;
letter-spacing: -1px;
font-weight: bold;
font-style: italic;
color: #ffad38;
text-align: center;
margin: 0 auto 0px;
}
.subtitle {
font-size: 14px;
font-style: italic;
color: #7c8697;
text-align: center;
margin-bottom: 30px;
}
.bold {
font-weight: bold;
}
.header {
text-align: center;
padding-bottom: 25px;
}
.header-wrap {
background: #123050 center bottom no-repeat;
display: block;
width: 100%;
}
img.header-desktop {
display: block;
width: 100%;
}
img.header-mobile {
display: none;
height:1px;
width: 1px;
}
h3 {
color: #123050;
font-size: 27px;
text-align: center;
font-weight:900;
text-transform: uppercase;
letter-spacing: -1px;
margin-top: 0;
margin-bottom: 20px;
}
h4.suggest {
text-transform: uppercase;
font-weight: 900;
font-size: 17px;
letter-spacing: -1.5px;
margin-top: 0;
margin-bottom: 10px;
}
td.suggest {
padding-top: 31px;
}
h5 {
text-transform: uppercase;
font-weight: bold;
margin-top: 10px;
margin-bottom:3px;
}
h3.fancy {
margin: 0 0 43px;
}
h3.fancy a {
color: #123050;
font-size: 24px;
text-transform: none;
font-weight: 600;
letter-spacing: 0;
margin: 0 0 43px;
}
h3.fancy a span {
color: #367eeb;
transition: 75ms ease-in color;
}
h3.fancy a:hover span {
color: #123050;
}
h4.fancy {
font-size: 17px;
font-weight: normal;
font-style: italic;
margin: 0 0 10px;
}
p.phone {
margin-bottom: 5px;
}
.category {
font-size: 13px;
font-style: italic;
margin-bottom: 30px;
}
p.feature-desc {
color: #414d62;
max-width: 465px;
margin: 0 auto;
margin-bottom: 40px;
}
a.button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.5px;
border: 2px solid #ffaf3d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 37px;
width: 127px;
line-height: 37px;
text-decoration: none;
display: inline-block;
}
.button img {
display: none;
}
a.button-view {
background: #ffaf3d;
color: #fff;
}
a.button-info {
color: #ffaf3d;
width: 103px;
}
a.button-view:hover {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
a.button-info:hover {
background: #ffaf3d;
color: #fff;
}
.td-button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.5px;
border: 2px solid #ffaf3d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 37px;
width: 127px;
line-height: 37px;
text-decoration: none;
display: inline-block;
}
.td-view {
background: #ffaf3d;
color: #fff;
}
.td-info {
color: #ffaf3d;
width: 103px;
}
.td-view a {
color: #fff;
height: 37px;
width: 127px;
line-height: 37px;
display: block;
text-align: center;
}
.td-info a {
color: #ffaf3d;
height: 37px;
width: 103px;
display: block;
}
.td-view:hover {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
.td-info:hover {
background: #ffaf3d;
color: #fff;
}
.td-view:hover a {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
.td-info:hover a {
background: #ffaf3d;
color: #fff;
}
a.small-button {
color: #152845;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
margin: 3px 0;
text-decoration: none;
}
img.separator {
width: auto;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
a.small-button-view {
}
a.small-button:hover {
color: #384c69;
}
.shadow {
box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.2);
border-bottom: 1px solid #ddd;
padding-top: 37px;
padding-bottom: 35px;
}
.more {
padding-top: 22px;
padding-bottom: 47px;
text-align: center !important;
box-sizing: border-box;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.footer {
background: #123050;
}
.footer p {
color: #fff;
height: 45px;
padding-top: 10px;
margin: 0;
text-align: center;
}
.footer a {
color: #fff;
display: inline-block;
height: 40px;
}
.footer span {
padding-right: 5px;
}
.center, .text, h4, h5 {
text-align: center;
}
#media (max-width:599px) {
/* img.header-mobile {
display: inline !important;
height: auto;
width: auto;
}
img.header-desktop {
display: none;
height: 1px;
width: 1px;
}
*/
.one-column .contents {
text-align: center !important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
</head>
<body>
<center class="wrapper">
<div class="webkit">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td>
<![endif]-->
<table class="outer" align="center">
<tr>
<td class="header">
<a class="header-wrap" href="">logo</a>
</td>
</tr>
<tr>
<td>
<h2 class="featured">Featured Product</h2>
</td>
</tr>
<tr>
<td>
<p class="subtitle">Recommendations for <span class="bold">All Star Marketing</span></p>
</td>
</tr>
<tr>
<td class="full-width-image">
<img src="http://www.inventionhome.com/dev/hotlink/images/featured.jpg" width="600" alt="" />
</td>
</tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td style="padding-top: 37px; padding-bottom: 35px;" class="inner contents shadow">
<h3>Item Name</h3>
<p class="feature-desc">Item Name is an electronic warmer, featuring a lightweight design that enables easy transportation of a hot food item between locations.</p>
<div style="width: 243px; margin: 0 auto; text-align: center;">
<table width="100%; max-width: 243px;">
<tr>
<td class="td-button td-view" valign="middle" align="center">
<p style="display: block;">View Product</p><p style="display: block; height: 7px;"> </p>
</td>
<td>
<img src="http://www.inventionhome.com/dev/hotlink/images/5x20.png" alt="" />
</td>
<td class="td-button td-info" valign="middle" align="center">
<p style="display: block;">More Info</p><p style="display: block; height: 7px;"> </p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="one-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td style="padding-top: 31px;" class="inner contents suggest">
<h4 class="suggest" vspace="50">May we also suggest</h4>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
</td>
</tr>
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/1.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/2.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/two-column-01.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="http://www.inventionhome.com/dev/hotlink/images/4.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td class="inner contents more">
<h4 class="fancy">Want more products?</h4>
<h3 class="fancy">Visit <span>Us Here</span></h3>
<h4 class="fancy">Contact us at</h4>
<p class="center phone"><strong>1-888-888-7777</strong></p>
<p class="center"><a style="font-weight: bold;" href="mailto:marketing#inventionhome.com" title="email">marketing#company.com</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background: #123050;" class="one-column footer">
<table width="100%">
<tr>
<td class="inner contents">
<p class="center"><span style="color: #fff;">Connect with us</span> <a class="social-icon" href="https://www.facebook.com/invention.home/" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/facebook.png" alt="Facebook" /></a><a class="social-icon" href="https://twitter.com/Inventionhome" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/twitter.png" alt="Twitter" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
I sent an email to my gmail account with your code in it, then viewed it on my phone and it looks absolutely perfect.
But as you said, if I use the chrome browser and log into to gmail it looks just how you described.
The reason is that GMAIL is stripping away your inline Stylesheet, when viewed in the browser. The original message is intact, but the client renders it without the stylesheets.
To get around the issue, you need to code the styles using the style attribute on the HTML Element, like this.
<table style="text-align:center">
Now your next question is how do I know this? I hit F12 in google chrome on my desktop, then view the email. This allows me to see the HTML and the Styles applied. Then within the Developer tools I click on the Toggle Device Toolbar then select the device I want to emulate in this case I choose iPhone 6+.
Then you can look at the html and adjust it and correct it within the tools.
I would also suggest you do some Inbox Testing, looking over the content of the email I think you're going to hit the spam box at a few locations.
Excuse my newbie coding because it's a Frankenstein mix of hundreds of email layouts, but can someone tell me why my table layout is not displaying the columned tables side-by-side?
It's the two td elements with the class name container-small at 50% width that won't position side-by-side. I'm not using float or divs.
Is it because they're separate tables when they should be part of the same td? Please feel free to make other amendments/suggestions so I can improve my layout. The left column must be 283px exactly, but the right column can be 100% fluid. That's really the only requirement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
the problem is here:
.container-small {
display: block !important;
width: 100% !important;
}
just remove this two properties above.
Snippet below:
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
/* REMOVE HERE
.container-small {
display: block !important;
width: 100% !important;
}
*/
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
</center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>