Hide an HTML banner from preview of email on a mobile device
Clash Royale CLAN TAG#URR8PPP
Hide an HTML banner from preview of email on a mobile device
I have an HTML banner that is being applied to emails that come in to our environment from an external sender. After testing, it was revealed that the banner blocks a person from previewing a received email on the mobile device. I have zero knowledge of HTML or CSS. What I have is from piecing together from bits here and there. The current articles I am reading are telling me to use the following code:
<style type="text/css">
.mobileHide display: inline;
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) .mobileHide display: none;
</style>
I've altered my HTML to this:
<html><head><style type="text/css">
.mobileHide display: inline;
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) .mobileHide display: none;
</style></head><body><div class="mobileHide"><table style="border: 1px
solid black;border-collapse: collapse">
<tbody>
<tr bgcolor="#ffac59">
<td>
<small>CAUTION: This is a test.</small>
</td>
</tr>
</tbody></table><h1></h1>
<br />
<mc type="body">
</div></body></html>
Can someone point out what I am doing wrong?
@MaximillianLaumeister Yes sir, that is correct. When I open the Outlook mobile app and view my Inbox I can see all my emails and I should also see the first line of text from each one. Instead, the stationary banner is displayed.
– Tar Heel
8 mins ago
2 Answers
2
One thing I can see is a typo in your style attribute:
<div class="”mobileHide”">
...has two double-quotes. It should be this:
<div class="mobileHide">
Thanks. I corrected that and I'm still getting the same results.
– Tar Heel
29 mins ago
@TarHeel, are you sure? I tried your code after the update and it works for me.
– Tibbelit
17 mins ago
@Tibbelit HTML emails are fickle. It could be that the CSS works great in a browser but not the email client that Tar Heel is testing on.
– Maximillian Laumeister
14 mins ago
@Tibbelit Yeah, I made the changes. I even saw that the "text/css" had double quotes as well and corrected that. We use Mimecast to filter all incoming mail and it has a policy that applies the HTML as a piece of stationary at the top of the emails. When I send a test to myself that stationary is still visible and blocking the preview.
– Tar Heel
12 mins ago
@MaximillianLaumeister, lazy reading from me - my bad, thanks for polite note! :)
– Tibbelit
12 mins ago
To get custom preview text on your email, it has to be the first text that appears in your email's body section, even before your header.
body
From litmus.com:
Preview text is pulled from the first few lines of text found within an email.
So what's happening is that the email client is reading the first few lines of your email to determine what to show as the preview text, but since your header is first, the email's preview text is the gibberish from the header section instead of the marketing speak that you want it to be.
What Litmus recommends you do is to add an extra, hidden element before your email header (right after the opening body tag) that contains the preview text that you want to show in the email client. You'll want to use this code:
body
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Insert preview text here.
</div>
It's not pretty, but email HTML itself is not pretty. What this does is it makes a hidden element at the top of your email that the client will pull as preview text, but that won't actually show to the end user when they open up the email.
Does this constitute spam or misleading behavior? Does it hurt your deliverability? Litmus says that it's fine in their experience:
Using hacks like this to hide content occasionally brings up concerns about deliverability. Our experience has been that, used sparingly and alongside an otherwise clean sending reputation, this works quite well.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
By the way, what specifically do you mean by "preview an email"? Do you mean that the email's preview text shows header gibberish instead of the preview of the body text that you want it to?
– Maximillian Laumeister
12 mins ago