RB
0
Identical HTML Blocks Display Differently on iPhone 5s
Hey folks,
I'm having a lot of trouble with two identical blocks of code in two emails rendering differently on iPhone 5s. I'm pulling my hair out over here trying to figure out if I'm doing something wrong, or there is a glitch in the Litmus system.
This one is working. Note that the gray footer bar shows up for both devices:
https://litmus.com/builder/54206b9
In this one, the gray footer bar is not showing up in iPhone 5s:
https://litmus.com/builder/6d1bf4a
The code in question is identical between the two emails. Here it is:
.footer-wrapper {
min-width: 100%;
padding-top: 36px;
}
.footer {
text-align: center;
color: #949599;
border-top: 1px solid #e5e5e5;
background-color: #F8F8F8;
min-width: 100%;
}
.footer .footer-logo {
width: 100%;
min-width: 100%;
padding-top: 12px;
text-align: center;
}
.footer .footer-logo img {
max-width: 120px;
width: 120px;
height: auto;
}
.footer .footer-address {
width: 100%;
min-width: 100%;
padding-top: 12px;
padding-bottom: 12px;
font-size: 12px;
line-height: 22px;
}
<tr>
<td class="footer-wrapper">
<table class="footer" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="footer-logo">
<a href="https://www.tubemogul.com"><img src="http://na-ab11.marketo.com/rs/453-JFP-852/images/tubemogul_gray.png" alt="TubeMogul"></a>
</td>
</tr>
<tr>
<td class="footer-address mktEditable" id="footerAddress">
1250 53rd Street, Suite 1, Emeryville, CA 94608
</td>
</tr>
</table>
</td>
</tr>
If it were consistently not showing up, I'd assume this was just iPhone 5s being fussy and look for a hack. However, it's not consistent, which is the bewildering part. Any help would be incredible!
btw tried to use the markdown in that post but it did not work. :/
Looks like your css isn't identical for the footers in the examples you provided.
I'd start there, and the problem should be self evident.
Thanks Sam - I must have been tinkering with it while posting that, I'd left an extraneous class in one of the pages.
However, I've triple checked now and the CSS is now identical and the problem remains. I'd love to know if you saw anything specific that would cause the behavior I'm seeing.
I actually managed to test my email on two actual iPhone 5 phones, and they properly display the footer. This leads me to believe there may be something up with Litmus's preview generator.
Mind emailing our support team at hello@litmus.com? We can take a look and see if there's anything wonky on our end.
@Jason, this seems to have fixed itself over the weekend. It is now showing the footer correctly.