I want to show google updates ,webpages are responsive but image width is not showing properly and go out of the boundary. Here is content of webpage.
<div dir="ltr" style="text-align: left;" trbidi="on"><span id="docs-internal-guid-489c1670-b0dc-d32d-645e-eaf6ca555069"><span style="font-family: Verdana; font-size: 13.3333333333333px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"><img alt="whats_new_doc_header_may2015LL.gif" height="112px;" src="https://lh5.googleusercontent.com/6RY9WSfX5yDRLKfl_Vp7GRQR1bFew_fO2rfOh7qcWrWwLvuaWtTxwIedwqvZJrQqGRPrlsJ-J3nlwrBGcEfhzDDwL_3yec8occvTSJTNeQVHNk4_tlmB-SQYfkqYkkJkRAJM64Q" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="624px;" /></span></span><br /><span style="font-family: Arial, Helvetica, sans-serif;">Check out the latest "What's New in Google Apps" </span>newsletter<span style="font-family: Arial, Helvetica, sans-serif;"> [</span>pdf<span style="font-family: Arial, Helvetica, sans-serif;">] for a roundup of all Apps launches from May 2015.</span><br /><br />Newsletter Archive & Translated Versions (coming soon for May issue)<br /><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span><i><span style="color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></i><i><span style="color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Note: all launches are applicable to all Google Apps editions unless otherwise noted</span></i><br /><br /><b>Launch release calendar</b><br /><b>Get these product update alerts by email</b><br /><b>Subscribe to the RSS feed of these updates</b></div><img src="http://feeds.feedburner.com/~r/GoogleAppsUpdates/~4/5Saf-LdMFA4" height="1" width="1" alt=""/>
NSString *htmLData = #" ";//Write your all Response Here
NSString *strTemplateHTML = [NSString stringWithFormat:#"<html><head> <style TYPE=\"text/css\"> img{max-width:100%;height:auto !important;width:auto !important;};</style></head><body style=\"margin:10; padding:0;\">%#</body></html>",htmLData];
[self.webView loadHTMLString:strTemplateHTML baseURL:nil];
Related
I want to display a photo, but without linking. Unable to remove the dynamic {{pic}} in the image module styles panel on the left. Trying to delete it crashes the page.
And I don't know how to remove it properly from the module HTML editor either:
<td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="left"><img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px;" width="163" alt="" data-proportionally-constrained="true" data-responsive="false" src="{{pic}}" height="163"></td>
I've automated the sending of my e-mails in PHP using PHPMailer:
$mail->isSMTP();
$mail->SMTPAuth = true;
$mail->Host = $host; // verified with my host
$mail->Port = 465;
$mail->Username = 'mymail#example.com'; // verified with my host
$mail->Password = 'mypassword'; // verified with my host
$mail->SMTPSecure = 'ssl';
$mail->SMTPAutoTLS = true;
$mail->setFrom( 'mymail#example.com', 'This is the Header of the E-Mail' );
$mail->addAddress( 'recipientsmail#hisexample.com', '' );
$mail->isHTML( true );
$mail->Subject = 'This is the Subject of the E-Mail';
$mail->CharSet = 'UTF-8';
$mail->Body = 'HTML Content of the E-Mail';
$mail->send();
$mail->SmtpClose();
First, many emails sned via this script dropped into the SPAM of my clients. I checked back with the host, and they helped me to add an SPF record:
Type: TXT
TTL: 300
Value: "v=spf1 redirect=shared_host_mail_server"
This improved the non-spam delivery rate a lot, but especially for gmail, significant portion still drops into spam. An example of the source of an email that dropped into the email spam is:
Delivered-To: my.secret#gmail.com
Received: by 2002:a17:906:f12:0:0:0:0 with SMTP id secret;
Mon, 21 Mar 2022 06:58:32 -0700 (PDT)
X-Google-Smtp-Source: ABdhPJz6F29tChwOYHMaPAlJC0D9QTnj/JMhktHDZEuWjHBWU7x/ZdnkZS7MccoMwSxrMjrZec73
X-Received: by 2002:a5d:4ad2:0:b0:203:d56d:9c82 with SMTP id secret;
Mon, 21 Mar 2022 06:58:30 -0700 (PDT)
ARC-Seal: i=1; a=rsa-sha256; t=1647871110; cv=none;
d=google.com; s=arc-20160816;
b=K3FgBLtaiFZEsUAPiR2dBpquBEVEKZ2A82PhG+nCN7I7NRTxE8KDueotg3pndOeoQQ
IaCxIO8uYvkka1BmdSz8RuL0H/+OuXh+UMTpuy5tnhteTy3IR5Ub8vfl2eCl5AsCUj1R
ZLkysapUMphblFlZnSz4JObVz0jgN8P4uAE39ObN1YVpLZ9bT//BXuVjyYbKuHyhDUoP
AnZ+cjey7I4dyuvaaUWyrIMC7xEnLratGSN4mtIBWhEuWrMokXZtnbVZMHtNh+W7d5d1
HGmWzWdnWftGZJFI8e2fnNSRosRE0pwzblCNAkGd+PmJHOEDlq5pmaLla1I9yZpxZa3z
dx4w==
ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=google.com; s=arc-20160816;
h=content-transfer-encoding:mime-version:message-id:subject:from:to
:date;
bh=NCbhFSalLdDA2HAK57ps0Gy6VG+hTVJz6G8PW0XPkpo=;
b=TuIDSDjGMJOISTWTkb8iaOA1qJ3QYFLU6adhuG2kbyzpICBc0EC5MNvkGDWcEH9znp
UjYJ0Uug/79c6ZSzLaXuv3THIwuO7MJTuM5r7YXTbFvGnwNlO/Qc1xO/bo63rIN1ZS8y
aKRtpzjO0hMqjxlbltnZPcNice0DqZZcX0BlaU8kkgKFGw96vpBj9A0ZZbAyvmK2Lyws
oGYdKUmcOhosxXIxM8AAu1JVtM0bI2EncDo5UvwBIXVitvgcmORTfS1u3RBsKakk9tXI
bBCer6hxpjjn+hRxMOsdjqFdLa0EIIxnuW/z05Yh4CYSPBi1RZM0q/hWCMPvjDqBRFY5
8vVQ==
ARC-Authentication-Results: i=1; mx.google.com;
spf=pass (google.com: domain of secret.sender#example.com designates 2a00:d70:0:e::313 as permitted sender) smtp.mailfrom=secret.sender#example.com
Return-Path: <secret.sender#example.com>
Received: from host_out_mail_server (host_out_mail_server. [2a00:d70:0:e::313])
by mx.google.com with ESMTPS id secret
for <my.secret#gmail.com>
(version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256);
Mon, 21 Mar 2022 06:58:30 -0700 (PDT)
Received-SPF: pass (google.com: domain of secret.sender#example.com designates secret_ip as permitted sender) client-ip=secret_ip;
Authentication-Results: mx.google.com;
spf=pass (google.com: domain of secret.sender#example.com designates secret.sender#example.com as permitted sender) smtp.mailfrom=secret.sender#example.com
Received: from [10.0.2.46] (helo=host_mail_server) by host_out_mail_server with esmtps
(TLS1.3) tls TLS_AES_256_GCM_SHA384 (Exim 4.94.2 (FreeBSD)) (envelope-from <secret.sender#example.com>) id 1nWIYH-0000QW-8D for my.secret#gmail.com; Mon, 21 Mar 2022 14:58:29 +0100
Received: from other_host_server ([2a00:d70:0:b::2:10] helo=example.com) by host_mail_server with esmtpa (Exim 4.95 (FreeBSD)) (envelope-from <secret.sender#example.com>) id 1nWIYG-00010j-7w for my.secret#gmail.com; Mon, 21 Mar 2022 14:58:29 +0100
X-Authenticated-Sender-Id: secret.sender#example.com
Date: Mon, 21 Mar 2022 13:58:28 +0000
To: my.secret#gmail.com
From: Werbe - Anfrage <secret.sender#example.com>
Subject: Bekanntmachung
Message-ID: <secret#example.com>
X-Mailer: PHPMailer 6.5.0 (https://github.com/PHPMailer/PHPMailer)
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks"
Content-Transfer-Encoding: 8bit
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE html>
<html lang=3D"de" xmlns=3D"http://www.w3.org/1999/xhtml" xmlns:o=3D"urn:sch=
emas-microsoft-com:office:office">
<head>
<meta charset=3D"UTF-8">
<meta name=3D"viewport" content=3D"width=3Ddevice-width,initial-scale=3D1=
">
<meta name=3D"x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<style type=3D"text/css">
table {border-collapse:collapse;border:0;border-spacing:0;margin:0;=
}
div, td {padding:0;}
div {margin:0 !important;}
</style>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style type=3D"text/css">
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
}
/* ANDROID CENTER FIX */
div[style*=3D"margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style=3D"margin: 0 !important; padding: 0; !important; word-spacing: =
normal; background-color: #ffffff;" bgcolor=3D"#ffffff">
<div style=3D"display: none; font-size: 1px; color: #fefefe; line-height: 1=
px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; =
max-width: 0px; opacity: 0; overflow: hidden;">
This is the text of the preheader
</div>
<table role=3D"presentation" border=3D"0" cellpadding=3D"0" cellspacing=3D"=
0" width=3D"100%" bgcolor=3D"#d3d3d3" style=3D"background: #d3d3d3;">
<tr>
<td align=3D"center" valign=3D"top" width=3D"100%" style=3D"padding=
: 0;">
<!--[if (gte mso 9)|(IE)]>
<table role=3D"presentation" align=3D"center" border=3D"0" cell=
spacing=3D"0" cellpadding=3D"0" width=3D"600">
<tr>
<td align=3D"center" valign=3D"top" width=3D"600">
<![endif]-->
<table role=3D"presentation" align=3D"center" border=3D"0" cell=
padding=3D"0" cellspacing=3D"0" width=3D"100%" style=3D"max-width:600px;">
<tr>
<td align=3D"center" valign=3D"top" style=3D"padding: 0; border-left: 1=
px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid=
#000000;">
<img src=3D"https://example.com/mail_visual.png" wi=
dth=3D"600" border=3D"0" alt=3D"" style=3D"display: block; width: 100%; hei=
ght:auto;" class=3D"img-max"/>
</td>
</tr>
<tr>
<td align=3D"left" valign=3D"top" bgcolor=3D"#ffffff" style=3D"backgrou=
nd: #ffffff; padding: 15px 30px 30px 30px; font-family: Open Sans, Helvetic=
a, Arial, sans-serif; border-left: 1px solid #000000; border-right: 1px sol=
id #000000;">
<h4 style=3D"font-family: Open Sans, Helvetica, Arial, sans-serif; =
font-size: 17px; line-height: 23px; color: #000000;">Salutation</h4>
<p style=3D"color: #000000; font-family: Open Sans, Helvetica, Aria=
l, sans-serif; font-size: 16px; line-height: 22px; margin: 0;">Sample Context</p>
</td>
</tr>
<tr>
<td align=3D"center" valign=3D"top" bgcolor=3D"#13aff0" style=3D"backgr=
ound: #13aff0; padding: 10px 30px; font-family: Open Sans, Helvetica, Arial=
, sans-serif; border-left: 1px solid #000000; border-right: 1px solid #0000=
00; border-top: 1px solid #000000;">
<h5 style=3D"font-family: Open Sans, Helvetica, Arial, sans-serif; fo=
nt-size: 16px; line-height: 24px; color: #ffffff; margin:0 0 5px 0;">Domai=
n</h5>
<img src=3D"https://example.com/icons/first.png" width=3D"107" he=
ight=3D"40" border=3D"0" alt=3D"first" style=3D"display: bl=
ock; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;=
" />
<p style=3D"margin:7px 0 15px 0;"><a href=3D"mailto:secret.sender=
#example.com" target=3D"_blank" style=3D"text-decoration: none; color: #fff=
fff; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px;=
line-height: 16px;">secret.sender#example.com</a></p>
<p style=3D"margin:0 0 14px 0;"><a href=3D"https://example.com" targe=
t=3D"_blank" style=3D"text-decoration: none; color: #ffffff; font-family: O=
pen Sans, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 16px;=
">www.example.com</a></p>
<!--[if (gte mso 9)|(IE)]>
<table role=3D"presentation" align=3D"center" border=3D"0" cellspacin=
g=3D"0" cellpadding=3D"0" width=3D"157">
<tr>
<td align=3D"center" valign=3D"top" width=3D"157">
<![endif]-->
<table role=3D"presentation" align=3D"center" border=3D"0" cellpaddin=
g=3D"0" cellspacing=3D"0" width=3D"100%" style=3D"max-width:157px;">
<tr>
<td style=3D"padding:0;">
<a href=3D"https://www.instagram.com/companylink/" target=3D"_blank=
" style=3D"text-decoration: none;"><img src=3D"https://example.com/icons/In=
stagram.png" alt=3D"Link for Instagram Channel" width=3D"30" height=
=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 15px;">
<a href=3D"https://www.linkedin.com/company/name" target=3D"=
_blank" style=3D"text-decoration: none;"><img src=3D"https://example.com/ic=
ons/LinkedIn.png" alt=3D"Link for LinkedIn Channel" width=3D"30" he=
ight=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 15px;">
<a href=3D"https://twitter.com/companyname" target=3D"_blank" style=
=3D"text-decoration: none;"><img src=3D"https://example.com/icons/Twitter.p=
ng" alt=3D"Link for Twitter Channel" width=3D"30" height=3D"30" sty=
le=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 7px;">
<a href=3D"https://www.facebook.com/compnyname" ta=
rget=3D"_blank" style=3D"text-decoration: none;"><img src=3D"https://domai=
n.com/icons/Facebook.png" alt=3D"Link for Facebook Channel" width=
=3D"30" height=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks
Content-Type: application/octet-stream; name=QR_DE.pdf
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=QR_DE.pdf
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks--
I don't see the problem in this e-mail source extract / the reason why it drops into spam; does anyone of you?
I then checked back with the host about the particular gmail problem, and they recommended me to change my spf record to:
"v=spf1 include:_spf.google.com redirect=shared_host_mail_server"
But I feel that this is wrong / is only necessary if you want to send emails from your domain across gmails server's, or am I wrong?
Anyway, any suggestions on how I can improve the result? I don't use DKIM / DMARC so far, because my host does not support DKIM signing. Is it a good idea to try to implement DKIM via PHPMailer in this case / is it even possible to do so if the host server does not support DKIM natively?
Thanks in advance for any help!
P.S.: I did this test and the result was:
This goes for both mentioned versions of the SPF. However if I check in other tools as mail-tester or email on acid, the SPF is valid. Just FYI
Header not showing up for blackberry work ios and the wrapper isn't being respected for blackberry email. Padding is also not respected in blackberry email for buttons.
I've tried border, align, adding a wrapper div for the weird space after that appears around images. I've given up on responsiveness for those clients but I would like to just look cohesive.
html,
body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border: 0;
border-spacing: 0;
border-collapse: collapse
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
/* What it does: A work-around for email clients automatically linking certain text strings. */
/* iOS */
a[x-apple-data-detectors],
.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;
}
u + #body a, /* Gmail */
#MessageViewBody a /* Samsung Mail */
{
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
.im {
color: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app. */
/* Create one of these media queries for each additional viewport size you'd like to fix */
.email-container {
width: 100% !important;
}
/* iPhone 4, 4S, 5, 5S, 5C, and 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, and 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+, and 8+ */
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<!-- What it does: Helps DPI scaling in Outlook 2007-2013 -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons and tags */
.s-btn__primary:hover {
background: #0077CC !important;
border-color: #0077CC !important;
}
.s-btn__white:hover {
background: #EFF0F1 !important;
border-color: #EFF0F1 !important;
}
.s-btn__outlined:hover {
background: rgba(0,119,204,.05) !important;
color: #005999 !important;
}
.s-tag:hover,
.post-tag:hover {
border-color: #cee0ed !important;
background: #cee0ed !important;
}
/* What it does: Styles markdown links that we can't write inline CSS for. */
.has-markdown a,
.has-markdown a:visited {
color: #0077CC !important;
text-decoration: none !important;
}
/* What it does: Styles markdown code blocks that we can't write inline CSS for. */
code {
padding: 1px 5px;
background-color: #EFF0F1;
color: #242729;
font-size: 13px;
line-height: inherit;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
}
pre {
margin: 0 0 15px;
line-height: 17px;
background-color: #EFF0F1;
padding: 4px 8px;
border-radius: 3px;
overflow-x: auto;
}
pre code {
margin: 0 0 15px;
padding: 0;
line-height: 17px;
background-color: none;
}
/* What it does: Styles markdown blockquotes that we can't write inline CSS for. */
blockquote {
margin: 0 0 15px;
padding: 4px 10px;
background-color: #FFF8DC;
border-left: 2px solid #ffeb8e;
}
blockquote p {
padding: 4px 0;
margin: 0;
overflow-wrap: break-word;
}
/* What it does: Rounds corners in email clients that support it */
.bar {
border-radius: 5px;
}
.btr {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bbr {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#media screen and (max-width: 680px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* Hides things in small viewports. */
.hide-on-mobile {
display: none !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* What it does: Utility classes to reduce spacing for smaller viewports. */
.sm-p-none {padding: 0 !important;}
.sm-pt-none {padding-top: 0 !important;}
.sm-pb-none {padding-bottom: 0 !important;}
.sm-pr-none {padding-right: 0 !important;}
.sm-pl-none {padding-left: 0 !important;}
.sm-px-none {padding-left: 0 !important; padding-right: 0 !important;}
.sm-py-none {padding-top: 0 !important; padding-bottom: 0 !important;}
.sm-p {padding: 20px !important;}
.sm-pt {padding-top: 20px !important;}
.sm-pb {padding-bottom: 20px !important;}
.sm-pr {padding-right: 20px !important;}
.sm-pl {padding-left: 20px !important;}
.sm-px {padding-left: 20px !important; padding-right: 20px !important;}
.sm-py {padding-top: 20px !important; padding-bottom: 20px !important;}
.sm-mb {margin-bottom: 20px !important;}
/* What it does: Utility classes to kill border radius for smaller viewports. Used mainly on the email's main container(s). */
.bar,
.btr,
.bbr {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.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;
}
}
</style>
<!-- Progressive Enhancements : END -->
</head>
<!--
The email background color is defined in three places, just below. If you change one, remember to change the others.
1. body tag: for most email clients
2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
3. mso conditional: For Windows 10 Mail
-->
<body width="100%" style="margin: 0; padding: 0 !important; background: #f3f3f5; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f3f3f5;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f3f3f5;">
<tr>
<td>
<![endif]-->
<!-- Visually Hidden Preview Text : BEGIN -->
<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;">
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our
</div>
<!-- Visually Hidden Preview Text : END -->
<div class="email-container" style="max-width: 680px; margin: 0 auto;">
<!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 680px;">
<!-----------------------------
EMAIL BODY : BEGIN
------------------------------>
<!-- Primary Email Body : BEGIN -->
<tr>
<td style="padding: 30px; background-color: #ffffff;" class="sm-p btr">
<div dir="rtl" style="display: table; width: 100%; margin: 0 auto; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620">
<tr>
<td align="left" valign="top" width="128">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 680px; min-width:100px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<!-- White text : BEGIN -->
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #fff; text-align: left; padding-right: 0px;">
<p>
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our clients every day. Last week, we announced that we have reached an agreement to acquire Cleary Gull<br><br>
</p>
</td>
</tr>
<!-- White text : END -->
<!-- View in Browser : BEGIN -->
<tr>
<td style="padding-bottom: 10px; font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;">
<a style="color: #9199A1; text-decoration: underline;" href="http://++ViewHTMLCustom++ ">View in browser</a>
</td>
</tr>
<!-- View in Browser : END -->
<!-- Hero Image : BEGIN -->
<tr>
<td>
<a href="https://us.cibc.com/en/commercial.html">
<img src="https://sf-asset-manager.s3.amazonaws.com/96926/7/1524.png" alt="CIBC Connections" border="0" height="" width="100%" style="display: block; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44;">
</a>
</td>
</tr>
<!-- Hero Image : END -->
<br>
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #3C3F44; text-align: left; padding-right: 0px;">
<p style="margin: 0;" class="has-markdown">
<br>
<br>
++FirstName++,<br><br>
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our clients every day. Last week, we announced that we have reached an agreement to acquire Cleary Gull, a Milwaukee-based boutique investment banking firm specializing in middle market mergers and acquisitions, private capital placement and debt advisory.
<br>
<br>
Cleary Gull is a well-recognized middle market investment bank. The team has advised on over 200 transactions for clients like you and has expertise in manufacturing, business services, consumer/retail and technology.
<br>
<br>
We expect the transaction to close in the fall. Your relationship manager can answer any questions you have about Cleary Gull or our Capital Markets services for you in the meantime.
<br><br>
</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>
<!-- PRIMARY BODY : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td aria-hidden="true" height="10" style="font-size: 0px; line-height: 0px;">
Newbie using a \div\ and inline font-weight around text in an HTML email to more closely match a light web sans-serif font. It renders fine using Email on Acid's tool. Code as follows:
\\div style="text-align: left; font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif; font-size: 18px; font-weight: 300; color: #333333; line-height: 28px;"\\
One PC/Outlook VIP stakeholder is seeing the Arial in a serif Times New Roman-ish font. I don't see how.
How can I overcome that -- without too much CSS? (I'm a CSS-novice.) Thx.
Use conditional tags for Outllook to force font-family(only native) and line-height
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
td,
td p,
td a {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
td p,
td a {
mso-line-height-rule: exactly !important;
}
</style>
Outlook doesn't support Helvetica Neue. When you include a special web font in the font-family it will revert to Times New Roman.
See more about fonts for email here: https://www.emailonacid.com/blog/article/email-development/best-font-for-email-everything-you-need-to-know-about-email-safe-fonts/
Im creating an newsletter email. It has a footer and the footer has some text altogether with some links to some of products. It works well in most inboxes, however on android 4.0, the links dont't allow more text to be next to them. They create a break-line.
See picture
Can you please help me out what's wrong with the code?
<table id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit- text-size-adjust: 100%; background-color: #333; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td pardot-region="footer_content02" class="footerContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #dbdbdb; font-family: Helvetica; font-size: 11px; line-height: 15px; text-align: left; padding: 20px;color:#aaa" align="left" valign="top"><span style="color:#fff;"><strong>ReviewPro</strong></span> is the leading provider of Guest Intelligence solutions to independent hotel brands worldwide. The company’s suite of cloud-based solutions includes <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/reputation-management-for-hotels/">Online Reputation Management (ORM)</a> and the <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/guest-survey-solution/">Guest Survey Solution (GSS)</a>, which enable clients to obtain a deeper understanding of reputation performance as well as operational/service strengths and weaknesses. We provide actionable insight to increase guest satisfaction, rankings on review sites/OTAs and ultimately revenue.<br>
The company offers the industry-standard <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/global-review-index/">Global Review Index™ (GRI)</a>, an online reputation score, which is used by thousands of hotels worldwide as a benchmark for reputation management efforts, based on review data collected from 161 OTAs and review sites in more than 45 languages. More than 19,000 hotel brands worldwide are currently using ReviewPro’s solutions. For more information about ReviewPro, please visit <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com">www.reviewpro.com</a>.</td>
</tr>
</tbody>
</table>
Here is the code