I have an issue when coding a block in Outlook.
I am trying to display only one block on desktop and one on mobile and have used classes and media queries. I know that for Outlook there are issues with media queries so this may be where I'm running into trouble.
Here's is my code which works fine in the browser, however, when I preview in Outlook it displays both the desktop and mobile version on top of each other when previewed in larger(desktop) version:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
@media screen and (max-width: 599px) {
.mobile-hide {
display:none !important;
visibility:hidden !important;
height:0 !important;
overflow:hidden !important;
font-size:0 !important;
line-height:0 !important;
padding:0;
max-height:0;
width:0 !important;
}
.mobile-show {
display: block!important;
}
}
@media screen and (min-width: 600px) {
.desktop-hide{
display:none;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr class="mobile-hide">
<td width="10"> </td>
<td colspan="4" align="center">
<p style="font-family:Verdana,sans-serif;font-size:20px;color:#393939;text-align:left;margin-bottom:0;margin-top:0;line-height:20px;font-weight: bold;">
<span style="font-size:14px;color:white;padding:10px;background-color:lightblue;" bgcolor="lightblue">Test</span><br><br>
<img style = "display: block!important;margin: 0 auto;" src="https://via.placeholder.com/50x50">
</p>
</td>
<td colspan="2" align="left" style="padding:20px;">
<p style="font-family:Verdana,sans-serif; color:#393939;text-align:left;margin-bottom:0;margin-top:0;line-height:20px;font-weight: bold;padding-left: :10px;">
<h2>Test Your Page</h2>
This is some test content to demonstrate the structure of how the page might be built. It is a test paragraph with a bit of content displayed and a smail bit of code attached.
</p>
</td>
<td width="30" style="padding:10px;"><b>Right</b>
</td>
</tr>
<tr class = "desktop-hide">
<td colspan="8">
<table class="mobile-width" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan ="2">Test Your Page <span style = "padding-left:30px;">Right</span></td></tr>
<tr><td><img style = "display: block!important;margin: 0 auto;" src="https://via.placeholder.com/50x50"></td><td>This is some test content to demonstrate the structure of how the page might be built. It is a test paragraph with a bit of content displayed and a smail bit of code attached.</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It would be great if someone can help me get this working so that when previewed in Outlook only one shows, depending on whether desktop or mobile view is showing
I still think trying to use a badly supported technology is folly, but the following might work.
Go mobile first. Apply the styles that will affect mobile outside of a media query. This means if media queries are not supported, this is your default style. Apply your desktop styles inside a media query, which should be ignored if media queries are not supported.
/*Go Mobile First - This will happen if media queries are supported or not*/
.mobile-hide {
display: none;
}
/*This will work where supported and be ignored where not
I.E. Outlook will always display the mobile version
*/
@media screen and (min-width: 600px) {
.desktop-hide {
display: none;
}
.mobile-hide {
display: table-row;
}
}<table border="0" cellpadding="0" cellspacing="0">
<tr class="mobile-hide">
<td width="10">
</td>
<td colspan="4" align="center">
<p style="font-family:Verdana,sans-serif;font-size:20px;color:#393939;text-align:left;margin-bottom:0;margin-top:0;line-height:20px;font-weight: bold;"><span style="font-size:14px;color:white;padding:10px;background-color:lightblue;" bgcolor="lightblue">Test</span><br><br><img style="display: block!important;margin: 0 auto;" src="https://via.placeholder.com/50x50"></p>
</td>
<td colspan="2" align="left" style="padding:20px;">
<p style="font-family:Verdana,sans-serif; color:#393939;text-align:left;margin-bottom:0;margin-top:0;line-height:20px;font-weight: bold;padding-left: :10px;">
<h2>Test Your Page</h2>This is some test content to demonstrate the structure of how the page might be built. It is a test paragraph with a bit of content displayed and a smail bit of code attached. </p>
</td>
<td width="30" style="padding:10px;"><b>Right</b></td>
</tr>
<tr class="desktop-hide">
<td colspan="8">
<table class="mobile-width" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">Test Your Page <span style="padding-left:30px;">Right</span></td>
</tr>
<tr>
<td><img style="display: block!important;margin: 0 auto;" src="https://via.placeholder.com/50x50"></td>
<td>This is some test content to demonstrate the structure of how the page might be built. It is a test paragraph with a bit of content displayed and a smail bit of code attached.</td>
</tr>
</table>
</td>
</tr>
</table>Also avoid using !important in this case it will make media queries even harder to apply.