Mudbath Blog

23 November 2015

How to hide Mobile content in the Desktop email client for responsive EDM's

If you’re looking for a quick tip on optimising your direct email marketing (EDM’s) campaigns, then read on.

In a responsive HTML Email it can be difficult to hide an element in the desktop version and show it in mobile -- unlike with a responsive website where you can just use "display:none".

The reason for this is that every mailing client reads your markup differently.

For example if you place a class on your td/table/image and then add display:none in your media query, it will not be recognised in Gmail because Gmail strips out the head section of your code and adds in its their own.

This means it they won't read any of the styles in your media query. To fix this your styles need to be inline, and still be able to be overridden in mobile mailing clients such as an iPhone.

Without the following styles your element/image - which should be hidden for desktop clients - will show twice in Gmail.

1. HOW TO HIDE ELEMENTS IN DESKTOP CLIENTS (TD,TABLE,UL,P,SPAN,H1,DIV)

Add the following inline styles to your element.

<td class="reset" style="display: none;font-size: 0px; max-height:0;">Hide me for desktop</td>

2. THEN RESET THE ABOVE TO SHOW IN MOBILE

@media screen and (max-width: 480px) {
	display: block !important;
	font-size: 14px !important;
	max-height: none !important;
}

3. HOW TO HIDE IMAGES IN DESKTOP CLIENTS

To hide mobile images in desktop clients use the following css styles.

eg)
<img src="my-image.jpg" class="resetImage" style="max-height:0;width:0" />

4. RESET

@media screen and (max-width: 480px) {
	.resetImage {
		max-height: none !important; 
	 	width: auto !important; 
	}
}