Won't hide content in outlook email
Question
I'm trying to make a responsive email template that works with outlook. The outlook HTML works fine and the responsive HTML also works fine.
I've made use of media queries for the responsive portion, but now whenever an email is sent to Outlook the content is duplicated.
My HTML is set up as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<style> //Media Queries are here </style>
</head>
<body>
<!--[if gte mso 12]>
//All of the Outlook HTML is held here
<![endif]-->
<!--[if gte mso 12]>
<div style="width:0px; height:0px; overflow:hidden; display:none;
visibility:hidden; mso-hide:all;">
<![endif]-->
//All of the none Outlook HTML is held here
<!--[if gte mso 12]></div><![endif]-->
</body>
</html>
What I want to happen is that the top portion will run whenever an email is sent to outlook and if it's any other client to use the other portion of HTML.
I know this isn't the best way to do this as really I should just show and hide portions of the code instead of the whole thing, but this was easier to put together.
Interestingly this only started occurring when I started making use of media queries instead of stating the same VW for all resolutions.
Any help would be appreciated.
2 answers
solution1
0 ACCPTED 2019-10-02 10:16:42
So my solution to this problem was to add style="mso-hide:all" onto every tag that was held within the second block.
solution2
0 2019-10-21 09:54:39
Use mso-hide:all in portion you want to hide for outlook, which makes the portion hidden for Outlook specific client.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.