Actualmente, los correos electrónicos se envían cuando los usuarios escriben mensajes o mencionan a otros usuarios.
El contenido del correo ocupará el 100% de la ventana de visualización.
¿Entonces, cómo establecer el ancho máximo de los correos electrónicos? Por ejemplo, 650px.
¡Lo intenté así pero no funcionó!
Puedes establecer un ancho máximo para los correos electrónicos creando una plantilla de correo que envuelva la etiqueta %{email_content} en una tabla con su max-width definido mediante CSS. Si deseas restringir el ancho para correos visualizados en Outlook, también debes agregar una tabla con un ancho fijo envuelta en etiquetas <!--[if mso]>.
Aquí tienes una plantilla básica de correo electrónico que limita el contenido a un máximo de 600px. Si utilizas esta plantilla, asegúrate de reemplazar la URL de la imagen del logotipo con la URL del logotipo de tu sitio. También reemplaza el valor del atributo href con la URL de tu sitio. El atributo alt de la imagen del logotipo debe establecerse con algo que tenga sentido para tu sitio.
Dado que la plantilla incluye el logotipo del sitio, debes asegurarte de desactivar la configuración del sitio
apply custom styles to digest. Si no lo haces, los correos de resumen enviados desde tu sitio mostrarán dos logotipos en la parte superior del mensaje.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 {
font-family: Helvetica, Arial, sans-serif !important;
}
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url"
alt="Nombre de tu sitio" width="150" height="40"
style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;">
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]></td></tr></table><![endif]-->
</td>
</tr>
</table>
He probado esto con un servicio de prueba de correos electrónicos en los clientes de correo más populares:
iPad (Retina) (iOS 13.1):
Aplicación de Gmail (Android 6.0):
iPhone 6 Plus:
