Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
iphone not centering text to entire width of row and table is leaving a white gap on right side

MarketVolt

Jr. Member
Total Posts:  39
Posted: 06 October 2016 06:24 AM

Can not figure out how to get the stacked <td> to fill the entire width and center text left to right in the top portion of the view and also why there is a large gap on the right side of my bottom table.  Photo and code attached.

Image Attachments
1.png
File Attachments
CSF_code.txt  (File Size: 10KB - Downloads: 111)

 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 06 October 2016 08:25 AM
[ # 1 ]

MarketVolt,
Thanks for posting!

You have everything with class=“table” set to become display block in your media query CSS. This is conflicting with the “stack” TDs becoming display block. If you remove the display:block style from the “table” class it should fix both of the issues you mentioned.

You may also want to remove all attribute selectors so that your email will be responsive in Gmail app: https://www.emailonacid.com/blog/article/industry-news/gmail-update-embedded-styles-and-media-queries


 

MarketVolt

Jr. Member
Total Posts:  39
Posted: 07 October 2016 01:04 AM
[ # 2 ]

Thanks for the information. I removed the display: block from the table, but it still does not seem to be centering. Also, by attribute selectors do you mean removing all the following…

.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
        table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
        #outlook a{padding:0;} /* Force Outlook 2007 and up to provide a “view in browser” message. */
        img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
        body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */