How to remove extra space in email notification

venugopal s · ‎02-11-2024

Hi Everyone,

Can anyone help me with removing white spaces in email notification in what it will contain section.

Source code :

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !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: Forces Samsung Android mail clients to use the entire viewport. */
#MessageViewBody,
#MessageWebViewDiv{
width: 100% !important;
}
/* 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: underline;
color: #0076D5;
}
/* 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: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* 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>

<p> </p>

<p> </p>

<p> </p>

<style>
/* 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 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;
}
@media screen and (max-width: 600px) {
/* 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). */
}
</style>
<center style="width: 100%; background: #ffffff;"> 
<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: arial, sans-serif;">Make your best work possible!</div>

<div class="email-container" style="max-width: 600px; margin: 0 auto;">
<table style="max-width: 600px; width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tbody>    
<tr>
<td style="text-align: center; padding-top: 15px; padding-bottom: 15px;"><img style="display: inline-block; width: 100%; max-width: 550px; height: auto; font-family: arial, sans-serif; font-size: 14px; line-height: 15px; color: #000000; margin: 0; padding: 0px;" src="https://www.bu.edu/globalprograms/files/2015/05/banner-placeholder.png" alt="" width="550" height="" border="0" /></td>
</tr>
 
<tr>
<td style="padding-bottom: 0px; font-family: arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; text-align: left;">
<h2>We’re here to support the future of hybrid work!</h2>
</td>
</tr>
 
<tr>
<td style="padding-bottom: 15px; background-color: #ffffff;">
<div style="display: table; width: 100%; text-align: left; font-size: 0;">
<div class="stack-column" style="display: inline-block; margin: 0 -1px; max-width: 100px; vertical-align: top;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 14px; line-height: 140%; color: #000000; text-align: left; padding: 10px;"><img style="display: block; margin: 0; font-family: arial, sans-serif; font-size: 14px; line-height: 15px; color: #000000;" src="https://via.placeholder.com/48" alt="" width="48" height="48" border="0" /></td>
</tr>
</tbody>
</table>
</div>

<div class="stack-column" style="display: inline-block; margin: 0 -1px; max-width: 470px; min-width: 320px; vertical-align: top;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="sm-px-none" style="padding: 10px;">
<p style="font-size: 14px; color: #000000; font-family: arial, sans-serif; margin-top: 0px;"><strong>Finish setting up your Hybrid Worker Bundle</strong><br />Need to set up more devices from your bundle? <a href="https://devices.cisco.com/setup" target="_blank" rel="noopener">Access setup instructions</a> and manage your devices.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
 
<tr>
<td style="padding-bottom: 15px; background-color: #ffffff;">
<div style="display: table; width: 100%; text-align: left; font-size: 0;">
<div class="stack-column" style="display: inline-block; margin: 0 -1px; max-width: 100px; vertical-align: top;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 14px; line-height: 140%; color: #000000; text-align: left; padding: 10px;"><img style="display: block; margin: 0; font-family: arial, sans-serif; font-size: 14px; line-height: 15px; color: #000000;" src="https://via.placeholder.com/48" alt="" width="48" height="48" border="0" /></td>
</tr>
</tbody>
</table>
</div>

<div class="stack-column" style="display: inline-block; margin: 0 -1px; max-width: 470px; min-width: 320px; vertical-align: top;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="sm-px-none" style="padding: 10px;">
<p style="font-size: 14px; color: #000000; font-family: arial, sans-serif; margin-top: 0px;"><strong>Get more apps</strong><br /><a href="https://appstore.cisco.com" target="_blank" rel="noopener">Explore the tools and software</a> specific to your role.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
 
<tr>
<td style="padding-bottom: 15px; background-color: #ffffff;">
<div style="display: table; width: 100%; text-align: left; font-size: 0;">
<div class="stack-column" style="display: inline-block; margin: 0 -1px; max-width: 100px; vertical-align: top;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 14px; line-height: 140%; color: #000000; text-align: left; padding: 10px;"><img style="display: block; margin: 0; font-family: arial, sans-serif; font-size: 14px; line-height: 15px; color: #000000;" src="https://via.placeholder.com/48" alt="" width="48" height="48" border="0" /></td>
</tr>
</tbody>
</table>
</div>

<div class="stack-column" style="display: inline-block; margin: 0 -1px; max-width: 470px; min-width: 320px; vertical-align: top;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="sm-px-none" style="padding: 10px;">
<p style="font-size: 14px; color: #000000; font-family: arial, sans-serif; margin-top: 0px;"><strong>Connect with your coworkers</strong><br />Find experts and make company connections through the <a href="https://directory.cisco.com/dir/" target="_blank" rel="noopener">Cisco Directory.</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
 
<tr>
<td style="padding: 0px; background-color: #ffffff;">
<div style="display: table; width: 100%; text-align: left; font-size: 0;">
<div class="stack-column" style="display: inline-block; margin: 0 -1px; max-width: 100px; vertical-align: top;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 14px; line-height: 140%; color: #000000; text-align: left; padding: 10px;"><img style="display: block; margin: 0; font-family: arial, sans-serif; font-size: 14px; line-height: 15px; color: #000000;" src="https://via.placeholder.com/48" alt="" width="48" height="48" border="0" /></td>
</tr>
</tbody>
</table>
</div>

<div class="stack-column" style="display: inline-block; margin: 0 -1px; max-width: 470px; min-width: 320px; vertical-align: top;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="sm-px-none" style="padding: 10px;">
<p style="font-size: 14px; color: #000000; font-family: arial, sans-serif; margin-top: 0px;"><strong>Search for what you need</strong><br />Can’t find something? <a href="https://wwwin.cisco.com/c/cec/index.html" target="_blank" rel="noopener">Browse our Intranet</a> — Cisco’s Employee Connection (CEC) — and search for content, people, and tools.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
 
<tr>
<td style="padding-bottom: 15px; padding-top: 65px; font-family: arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; text-align: center;">
<h2>If you need support</h2>
<p><a href="https://cisco.service-now.com/helpzone">Contact us</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</center>

Thanks @Dr Atul G- LNG @Sandeep Rajput @Maik Skoddow @Danish Bhairag2

Community Alums · ‎02-11-2024

Hi @venugopal s ,

Please follow the link :https://www.servicenow.com/community/itsm-forum/how-to-remove-extra-space-between-two-line-in-email/...

Danish Bhairag2 · ‎02-11-2024

Hi @venugopal s ,

I am not very good with front end but after looking at the code I believe the issue is somewhere here with max-width or padding

<table style="max-width: 600px; width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0"><!-- Banner : BEGIN -->
<tbody><!-- Banner : END --> <!-- Logo : END --> <!-----------------------------
EMAIL BODY : BEGIN
------------------------------> <!-- Rich Text : END --> <!-- Banner : BEGIN -->
<tr>
<td style="text-align: center; padding-top: 15px; padding-bottom: 15px;"><img style="display: inline-block; width: 100%; max-width: 550px; height: auto; font-family: arial, sans-serif; font-size: 14px; line-height: 15px; color: #000000; margin: 0; padding: 0px;" src="https://www.bu.edu/globalprograms/files/2015/05/banner-placeholder.png" alt="" width="550" height="" border="0" /></td>
</tr>
<!-- Banner : END --> <!-- Rich Text : BEGIN -->
<tr>
<td style="padding-bottom: 0px; font-family: arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; text-align: left;">
<h2>We&rsquo;re here to support the future of hybrid work!</h2>
</td>
</tr>
<!-- Rich Text : END --> <!-- 2 column : BEGIN -->

Thanks,

Danish