html - Cannot debug email template for Gmail Mobile -
http://codepen.io/anon/pen/dogwqw
screenshots of wrong:
no matter try change, can't part says "may suggest", or below says "want more products?", centered in gmail's mobile app.
if turn phone in landscape mode displays right, normal vertical view width of block not 100% though text still centered.
footer text text aligned left reason.
on gmail.com on chrome mobile, whole template looks not @ designed mobile , full desktop width.
how debug this?
can't use kind of dev tool in these programs , nothing can think of in code should making 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; } { 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; } /* 1 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 { 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 { 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 { color: #123050; font-size: 24px; text-transform: none; font-weight: 600; letter-spacing: 0; margin: 0 0 43px; } h3.fancy 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 { color: #fff; height: 37px; width: 127px; line-height: 37px; display: block; text-align: center; } .td-info { 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 { border-color: #ed9d2a; background: #ed9d2a; color: #fff; } .td-info:hover { 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 { 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 <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 electronic warmer, featuring lightweight design enables easy transportation of 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 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 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 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 email gmail account code in it, viewed on phone , looks absolutely perfect.
but said, if use chrome browser , log gmail looks how described.
the reason gmail stripping away inline stylesheet, when viewed in browser. original message intact, client renders without stylesheets.
to around issue, need code styles using style attribute on html element, this.
<table style="text-align:center"> now next question how know this? hit f12 in google chrome on desktop, view email. allows me see html , styles applied. within developer tools click on toggle device toolbar select device want emulate in case choose iphone 6+.
then can @ html , adjust , correct within tools.
i suggest inbox testing, looking on content of email think you're going hit spam box @ few locations.
Comments
Post a Comment