我无法制作此html新闻模板以在移动邮件服务（如Android版Gmail）上正确显示。
在移动设备上打开时，不应显示侧面的灰色条（实际上是电子邮件的正文），但可以显示。奇怪的是，当您打开电子邮件时，条形图在那里，但是如果您使用横向模式，然后再回到纵向模式，则邮件将正确显示。这是显示问题的图片：
我尝试了媒体查询并使用“ width”属性，但似乎无济于事。
<html lang="es">
<head>
<title>Notificaciones - Banza</title>
<meta lang="es">
<meta charset="UTF-8">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=9; IE=8; IE=7; IE=EDGE" http-equiv="X-UA-Compatible">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
<link href="https://fonts.googleapis.com/css?family=Catamaran:600|Montserrat:400,500,700|Raleway:700&display=swap">
</head>
<body yahoo="fix" style="background-color: #dedee0; font-family: 'Montserrat', Arial, sans-serif; font-size: 18px;">
<table class="main-container no-pudimos-verificar-tu-cuenta" width="600px" align="center" cellpadding="0" cellspacing="0" style="background-color: #fff;">
<tbody>
<tr>
<td>
<table class="white-space" width="600px" height="40" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table class="header" width="600px" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="header-image-container" align="center"><img class="header-image" src="https://hola.banza.com.ar/wp-content/uploads/2019/07/clock_illus.png"></td>
</tr>
</tbody>
</table>
<table class="white-space" width="600px" height="40" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table class="notification-title" width="540px" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="notification-title-container" align="center">
<p style="color: #3863c4; font-family: 'Montserrat', Arial, sans-serif; font-size: 2em; font-weight: 700; margin: 0;">Tu orden está en proceso</p>
</td>
</tr>
</tbody>
</table>
<table class="white-space" width="600px" height="20" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table class="order-status" width="600px" align="center" cellpadding="0" cellspacing="0" style="font-size: 1.3em;">
<tbody>
<tr>
<td class="order-status-container" align="center" width="150">
<p>Su estado es<span style="color: white">-</span><span class="state" style="border-bottom: 1px solid #10c95d; color: #10c95d; font-weight: 700;">pendiente</span></p>
</td>
</tr>
</tbody>
</table>
<table class="white-space" width="600px" height="40" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table><a class="cta-link" href="http://google.com.ar" style="text-decoration: none;">
<table class="cta" width="600px" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="170" height="60" style="color: #fff; text-decoration: none !important;"></td>
<td class="cta-container" align="center" style="background: #3863c4; border: 1px solid #355eba; border-bottom: 3px solid #2d4f9d; border-radius: 3px; color: #fff; text-decoration: none !important;">Ingresar</td>
<td width="170" height="60" style="color: #fff; text-decoration: none !important;"></td>
</tr>
</tbody>
</table>
</a>
<table class="white-space" width="600px" height="50" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table class="pre-footer" width="600px" align="center" cellpadding="0" cellspacing="0" style="font-size: 0.9em;">
<tbody>
<tr>
<td class="details" style="padding-left: 40px;">
<p style="color: #3863c4; font-family: 'Montserrat', Arial, sans-serif; font-size: 1em; margin: 0;">Elegí el instrumento que</p>
<p style="color: #3863c4; font-family: 'Montserrat', Arial, sans-serif; font-size: 1em; margin: 0;">mejor se amolde a tus deseos.</p><br>
<p class="strong" style="color: #3863c4; font-family: 'Montserrat', Arial, sans-serif; font-size: 1em; font-weight: 700; margin: 0;">¡No podemos esperar para</p>
<p class="strong" style="color: #3863c4; font-family: 'Montserrat', Arial, sans-serif; font-size: 1em; font-weight: 700; margin: 0;">ayudarte a que crezcan tus ahorros!</p>
</td>
<td width="20px"></td>
<td class="illustration" align="center"><img src="https://hola.banza.com.ar/wp-content/uploads/2019/07/hand_illus.png" style="width: 200px;"></td>
</tr>
</tbody>
</table>
<table class="pre-footer" width="600px" align="center" cellpadding="0" cellspacing="0" style="font-size: 0.9em;">
<tbody>
<tr>
<td><img src="https://hola.banza.com.ar/wp-content/uploads/2019/07/banza_daily_lowergradient-1.png" width="600px"></td>
</tr>
</tbody>
</table>
<div class="footer section">
<table class="footer-table" width="600px" align="center" cellpadding="0" cellspacing="0" style="background: #010311; color: #fff;">
<tbody>
<tr>
<td>
<table class="white-space" width="540px" height="20px" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<p style="color: #dedee0; text-align: center;">Enviado de tu equipo de Banza</p>
</td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td>
<p style="color: #dedee0; text-align: center;">Sigamos en contacto</p>
</td>
</tr>
</tbody>
</table>
<table class="white-space" width="540px" height="20px" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="social-icon-container" style="padding: 5px;"><a href="#"><img width="30px" height="30px" src="https://hola.banza.com.ar/wp-content/uploads/2019/07/banza_premarket_fb_footer.png"></a></td>
<td class="social-icon-container" style="padding: 5px;"><a href="#"><img width="30px" height="30px" src="https://hola.banza.com.ar/wp-content/uploads/2019/07/banza_premarket_inst_footer.png"></a></td>
<td class="social-icon-container" style="padding: 5px;"><a href="#"><img width="30px" height="30px" src="https://hola.banza.com.ar/wp-content/uploads/2019/07/banza_premarket_twt_footer.png"></a></td>
<td class="social-icon-container" style="padding: 5px;"><a href="#"><img width="30px" height="30px" src="https://hola.banza.com.ar/wp-content/uploads/2019/07/banza_premarket_li_footer.png"></a></td>
</tr>
</tbody>
</table>
<table class="white-space" width="540px" height="10px" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<p class="lower-footer-text" style="color: #dedee0; font-size: 0.6em; text-align: center;">Juncal 1311 3°Piso - CABA</p>
</td>
</tr>
<tr>
<td>
<p class="lower-footer-text" style="color: #dedee0; font-size: 0.6em; text-align: center;">Copyright © 2019 Banza | Regulados por la CNV, IUF, y BCRA | Código de Conducta</p>
</td>
</tr>
</tbody>
</table>
<table class="white-space" width="540px" height="30px" align="center" cellpadding="10px" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>