CODEWITHSUNDEEP
htmlemailresponsive-designhtml-email
JotaroUchiha
JotaroUchiha

Reputation: 25

HTML Responsive Email

Using Litmus for responsive emails is showing great results for the majority of browsers, however some objects in the email are using Display:none !important; and are still showing up completely in Yahoo / Gmail, and partially in outlook 2013.

Using the styling code as following

Basic Styling

.mobile {display: none; font-size:0; max-height: 0; line-height: 0; mso-hide:all;}

@ Media

table[class=mobile] {display:block !important;line-height:1.5% !important; max-height: none !important; font-size: 12px !important;}

`<table class="mobile">
<tr>
<td>This should show up on mobile
</td>
</tr>
</table>

`

On most browser via litmus only one or the other will show, but on Gmail it is showing both the mobile an the browser text

Upvotes: 0

Views: 583

Answers (4)

Crennotech
Crennotech

Reputation: 519

I know its an old post.

Solution is to use html tables to layout email content that will look and work well on outlook. Then wrapp the columns in </td> </td> so that the td columns will be killed on other email client's like gmail, mobile emails etc.

This way you can create emails with two columns on outlook but wrap the columns on non outlook.

Upvotes: 0

zazzyzeph
zazzyzeph

Reputation: 1795

Try wrapping your mobile tables in this:

<!--[if !mso]><!-->
<div class="mobileonly" style="display:none; width:0px; max-height:0px; overflow:hidden;">
    <!-- tables! -->
</div>
<!--<![endif]-->

then in your media query

div[class="mobileonly"] {
    display:block !important;
    overflow : visible !important;
    width:auto !important;
    max-height:inherit !important;
}

Upvotes: 0

John Smith
John Smith

Reputation: 1814

Seeing as your question is lacking in any relevant information i can only advise you.

  1. Read and follow the information here http://kb.mailchimp.com/article/how-to-code-html-emails/ Especially note the point 99% of your CSS won't work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.).

  2. Avoid as much css as possible, code like its 1999 - yes use tables

  3. IF you must use css, use inline, and what you cannot use inline put in the body and not the head.

So if you are trying to hide something ?? what we dont know - you need more to start thinking about things like white text on a white background.

Upvotes: 0

Alex
Alex

Reputation: 9031

display isn't supported in Outlook 2013 or googlemail - http://www.campaignmonitor.com/css

However z-index is. So you could try setting a negative z-index. I've not tested this, but worth a try.

Upvotes: 1

Related Questions