http://codepen.io/anon/pen/dOGWQW
Screenshots of what is wrong:
https://i.sstatic.net/6BXO7.jpg
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">
<a href="" title=""><p style="display: block;">View Product</p><p style="display: block; height: 7px;"> </p></a>
</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">
<a href="" title=""><p style="display: block;">More Info</p><p style="display: block; height: 7px;"> </p></a>
</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"><a href="http://www.ishowonline.com/" title="iShowOnline">Visit <span>Us Here</span></a></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.