-1
I’m creating a responsive email marketing and I’m having trouble letting the text of the email take up all the space after the images. They are all involved in the table as it is format for email.
Follow the code below:
/* O que ele faz: Remova espaços ao redor do design de email adicionado por alguns clientes de email. */
/* Cuidado: Pode remover o preenchimento / margem e adicionar uma cor de fundo para compor uma janela de resposta. */
html,
body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* O que faz: Para clientes de email redimensionamento de texto pequeno. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* O que faz: Centraliza o email no Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* O que faz: Impede que o Outlook adicione espaçamento extra às tabelas. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Replaces default bold style. */
th {
font-weight: normal;
}
/* O que faz: corrige o problema de preenchimento do webkit. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* O que faz: impede que o Windows 10 Mail enfatize os links, apesar do CSS inline. Estilos para links sublinhados devem estar em linha. */
a {
text-decoration: none;
}
/* O que ele faz: usa um método de renderização melhor ao redimensionar imagens no IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* O que ele faz: uma solução alternativa para clientes de email que se intrometem em links acionados. */
a[x-apple-data-detectors],
/* iOS */
.unstyle-auto-detected-links a,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* O que ele faz: impede que o Gmail altere a cor do texto nos tópicos da conversa. */
.im {
color: inherit !important;
}
/* O que faz: impede que o Gmail exiba um botão de download em imagens grandes e não vinculadas. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* Se o acima não funcionar, adicione uma classe .g-img a qualquer imagem em questão. */
img.g-img+div {
display: none !important;
}
/* O que ele faz: remove a gutter da direita no aplicativo do Gmail para iOS: iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Crie uma dessas consultas de mídia para cada tamanho de viewport adicional que você deseja corrigir */
/* iPhone 4, 4S, 5, 5S, 5C, e 5SE */
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u~div .email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, e X */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u~div .email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, e 8+ */
@media only screen and (min-device-width: 414px) {
u~div .email-container {
min-width: 414px !important;
}
}
</style><!-- O que faz: Faz com que as imagens de fundo em 72ppi Outlook sejam renderizadas no tamanho correto. --><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><!-- CSS Reset: FIM --><!-- Progressive Enhancements: INICIO --><style>
/* O que faz: estilos de hover para botões */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td-primary:hover,
.button-a-primary:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 640px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
/* O que faz: força as células da tabela em linhas de largura total. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* E centraliza */
.stack-column-center {
text-align: center !important;
}
/* O que faz: Classe de utilidade genérica para centralização. Útil para imagens, botões e tabelas aninhadas. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* O que faz: ajuste a tipografia em telas pequenas para melhorar a legibilidade */
/*
.email-container p {
font-size: 17px !important;
}
*/
/* O que faz: remove a quebra de linha no mobile */
.hideThis {
display: none !important;
}
}<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Codificação do texto -->
<meta name="viewport" content="width=device-width">
<!-- Forçar a escala inicial não deveria ser necessário -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use a versão mais recente (borda) do mecanismo de renderização do IE -->
<meta name="x-apple-disable-message-reformatting">
<!-- Desativar totalmente a escala automática no iOS 10 Mail -->
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
<!-- Diga ao iOS para não vincular automaticamente determinadas likns no texto. -->
<title>PF Recorrente - Itaú Personnalité</title>
<!-- A tag de título é exibida em notificações por e-mail, como o Android 4.4. -->
<!-- CSS Reset : INICIO -->
<style>
</style>
<!-- Progressive Enhancements : END -->
</head>
<!--
A cor de fundo do email (# 222222) é definida em três locais:
1. tag body: para a maioria dos clientes de email
2. marca central: para aplicativos móveis do Gmail e do Inbox e versões da Web do Gmail, GSuite, Caixa de entrada, Yahoo, AOL, Líbero, Comcast, freenet, Mail.ru, Orange.fr
3. mso condicional: para o Windows 10 Mail
-->
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color:#ffffff">
<center style="width: 100%; background-color: #ffffff;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #ffffff;">
<tr>
<td>
<![endif]-->
<!-- Texto do Preheader Visualmente Escondido : INICIO -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
Condições especiais e benefícios exclusivos pra você.
</div>
<!-- Texto do Preheader Visualmente Escondido : FIM -->
<!-- Crie espaço em branco após o texto de visualização desejado para que os clientes de e-mail não peguem outro texto de distração na visualização da caixa de entrada. Estenda conforme necessário. -->
<div> </div>
<!-- Visualizar o espaçamento de texto Hack : INICIO -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!-- Visualizar o espaçamento de texto Hack : FIM -->
<!-- Email Body : INICIO -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="1" width="640" style="margin: auto;" class="email-container">
<!-- Email Header : INICIO -->
<tr>
<td align="right" style="padding: 20px 0; text-align: right!important;">
<img src="https://www.imagemhost.com.br/images/2021/08/31/IPRT01.png" width="60" height="60" alt="Logo Itaú Personnalité" border="0" style="top:90px; left:549px; opacity: l; display: block; padding-left: 545px;">
</td>
</tr>
<!-- Email Header : FIM -->
<!-- Imagem : INICIO -->
<tr>
<td style="background-color: #0D1733; width:640px; padding-left: 54px;">
<img src="https://www.imagemhost.com.br/images/2021/08/31/IPRT02.png" width="267" height="308" alt="alt_text" border="0" style="background: #0D1733 0% 0% no-repeat padding-box; top:180px; left:0px; display: block; opacity: l;" class="g-img">
</td>
<td style="background-color: #ffffff;">
<img src="https://www.imagemhost.com.br/images/2021/08/31/IPRT03.png" width="270" height="404" alt="alt_text" border="0" style="top:180px; left:370px; opacity: l; display: block; padding-left: 50px; background-color: #0D1733;" class="g-img">
</td>
</tr>
<!-- Imagem : FIM -->
<!-- 1 Coluna Texto + Button : INICIO -->
<tr>
<td style="background-color: #ffffff;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 50px 60px; font-family: Arial; font-size: 14px; line-height: 20px; color: #56504C;">
<p style="margin: 0 0 10px; font-size: 14px; line-height: 30px; color: #56504C; font-weight:bold;">Olá,
<%=emailCampanhas.vars._151PRMN%>
</p>
<p style="margin: 0 0 10px;">O relacionamento que construímos até aqui é muito importante para nós! Por isso, neste momento queremos te dar boas notícias para manter o recebimento do seu salário com a gente.</p>
</td>
</tr>
Use colspan="2" in the bottom column.
– Sam