Email Template not adding styling | Community
Skip to main content

Email Template not adding styling

  • March 5, 2021
  • 1 reply
  • 0 views
J

Hi there!

We are trying to style our email template and the mark up is not coming through at all when testing via Gmail.

Is this an issue with our mark up/styling or with Gmail formatting?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
.manual-logo-container {
height: 130px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
}
.manual-logo {
height: 47px;
width: 230px;
}
.trust-pilot {
color: #0b3b3c;
font-size: 28px;
line-height: 40px;
text-align: center;
font-family: "TTNorms-Regular", Arial, sans-serif;
font-style: normal;
font-weight: normal;
margin-bottom: 40px;
letter-spacing: -3%;
}
.paragraph-text {
padding-left: 80px;
padding-right: 80px;
padding-bottom: 80px;
font-size: 18px;
font-weight: normal;
line-height: 30px;
font-style: normal;
font-family: "TT Norms Regular", Arial, sans-serif;
color: #0b3b3c;
text-align: left;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #bec5b3;
font-family: "TT Norms Regular", Arial, sans-serif;
color: #303030;
}
@media only screen and (max-width: 767px) {
.manual-logo-container {
height: 70px;
}
.paragraph-text {
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
}
.manual-logo {
height: 28px;
width: 230px;
}
.trust-pilot {
font-size: 18px;
}
}
table td {
border-collapse: collapse;
}
td {
margin: 0;
}
td img {
display: block;
}
a {
color: #0b3b3c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #0b3b3c;
}
a img {
text-decoration: none;
}
a:visited {
color: #0b3b3c;
}
a:active {
color: #0b3b3c;
}
</style>
</head>
​
<body style="display: flex; flex-direction: column">
<p style="text-align: center; font-size: 7pt">
<span style="color: #777777">{{delimiter}}</span>
</p>
<div style="background-color: #fff; max-width: 960px">
<!-- manual logo -->
<div class="manual-logo-container">
<a href="https://www.manual.co/">
<svg
class="manual-logo"
viewBox="0 0 230 47"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.3744 44.4228C12.5269 44.4228 11.9972 43.7798 11.9972 42.7279C11.9972 37.7572 21.8602 26.4668 31.6992 16.8963C30.0356 27.6448 19.044 44.4228 13.3744 44.4228ZM48.6803 0.00362141C47.3264 0.0362485 44.5488 0.141333 42.1123 0.176291C41.2552 0.188579 40.9128 0.573642 41.0227 1.1264C41.1521 1.77777 41.5814 2.26008 42.2272 2.27714C43.0589 2.29917 44.1728 2.1603 45.601 2.09006C42.3542 4.58815 38.426 7.87163 34.3731 11.5248C33.897 7.84949 32.1931 4.91008 28.8405 4.91008C23.9676 4.91008 19.0947 12.3253 16.9761 16.4567C16.7642 13.0669 15.2811 9.8889 12.1032 9.8889C5.49597 9.8889 0 24.9239 0 27.1737C0 27.9429 0.879661 28.533 1.40932 28.533C2.04492 28.533 2.25148 28.2152 2.46335 27.4736C5.21758 18.4694 9.34894 12.2194 12.1032 12.2194C13.4803 12.2194 14.5396 13.8084 14.5396 17.516C14.5396 20.244 14.0749 21.9003 14.0749 22.5467C14.0749 23.5568 14.9633 24.0838 15.493 24.0838C16.1286 24.0838 16.3405 23.766 16.6583 23.0245C19.8362 15.1855 25.0269 7.34652 28.7345 7.34652C30.5603 7.34652 31.8023 9.67862 31.9048 13.7822C20.7888 24.0951 9.58919 36.5226 9.58919 42.6361C9.58919 45.1805 10.9922 46.6474 13.2684 46.6474C21.4409 46.6474 34.2314 26.336 34.5097 14.2075C39.0577 9.9282 43.3944 6.19133 46.5153 3.81358C46.0347 5.00585 45.5504 6.16549 45.304 7.03106C45.1236 7.66432 45.2335 8.36061 46.0118 8.66326C46.5039 8.85468 46.9426 8.57724 47.1355 8.02714C48.3083 4.68085 48.9125 3.30828 49.6299 1.39377C50.099 0.141545 50.0489 -0.0293235 48.6803 0.00362141Z"
fill="#0B3B3C"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M110.349 13.1251L99.6374 33.3291H102.812L105.746 27.6729H117.656L120.619 33.3291H123.794L113.083 13.1251H110.349ZM111.671 16.2464L116.311 25.1033H107.078L111.671 16.2464Z"
fill="#0B3B3C"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M193.565 13.1251L182.854 33.3291H186.029L188.962 27.6729H200.873L203.836 33.3291H207.011L196.3 13.1251H193.565ZM194.888 16.2464L199.527 25.1033H190.295L194.888 16.2464Z"
fill="#0B3B3C"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M212.648 13.1251V33.3291H230V30.6822H215.595V13.1251H212.648Z"
fill="#0B3B3C"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M147.489 13.1251V29.4345L132.085 13.1251H129.431V33.3291H132.24V17.0781L147.593 33.3291H150.297V13.1251H147.489Z"
fill="#0B3B3C"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M175.945 24.4638C175.945 29.1413 172.779 31.2005 168.538 31.2005C164.297 31.2005 161.131 29.1413 161.131 24.4638V13.1251H158.184V24.4298C158.184 30.9371 162.466 33.8437 168.538 33.8437C174.61 33.8437 178.892 30.9371 178.892 24.4298V13.1251H175.945V24.4638Z"
fill="#0B3B3C"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M82.0002 23.3904L72.6535 13.125H70V33.329H72.8081V17.0782L82.0002 27.1346L91.1923 17.0782V33.329H94.0004V13.125H91.3469L82.0002 23.3904Z"
fill="#0B3B3C"
/>
</svg>
</a>
</div>
<!-- Email content -->
<div class="paragraph-text">
<p>{{content}}</p>

<div>
<div>Best</div>
<div>Manual</div>
<div>
<a style="color: #7e0707" href="https://www.manual.co"
>www.manual.co</a
>
</div>
</div>
</div>
<!-- Trust pilot -->
<div
style="
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
"
>
<div style="margin-bottom: 20px">
<svg
width="36"
height="35"
viewBox="0 0 36 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M35.5 0H0.5V35H35.5V0Z" fill="#00B67A" />
<path
d="M18.4557 23.5156L23.7232 22.1667L25.924 29.0208L18.4557 23.5156ZM30.5781 14.6563H21.3059L18.4557 5.83334L15.6055 14.6563H6.33334L13.8377 20.125L10.9875 28.9479L18.4918 23.4792L23.1099 20.125L30.5781 14.6563Z"
fill="white"
/>
</svg>
<svg
width="36"
height="35"
viewBox="0 0 36 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M35.5 0H0.5V35H35.5V0Z" fill="#00B67A" />
<path
d="M18.4557 23.5156L23.7232 22.1667L25.924 29.0208L18.4557 23.5156ZM30.5781 14.6563H21.3059L18.4557 5.83334L15.6055 14.6563H6.33334L13.8377 20.125L10.9875 28.9479L18.4918 23.4792L23.1099 20.125L30.5781 14.6563Z"
fill="white"
/>
</svg>
<svg
width="36"
height="35"
viewBox="0 0 36 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M35.5 0H0.5V35H35.5V0Z" fill="#00B67A" />
<path
d="M18.4557 23.5156L23.7232 22.1667L25.924 29.0208L18.4557 23.5156ZM30.5781 14.6563H21.3059L18.4557 5.83334L15.6055 14.6563H6.33334L13.8377 20.125L10.9875 28.9479L18.4918 23.4792L23.1099 20.125L30.5781 14.6563Z"
fill="white"
/>
</svg>
<svg
width="36"
height="35"
viewBox="0 0 36 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M35.5 0H0.5V35H35.5V0Z" fill="#00B67A" />
<path
d="M18.4557 23.5156L23.7232 22.1667L25.924 29.0208L18.4557 23.5156ZM30.5781 14.6563H21.3059L18.4557 5.83334L15.6055 14.6563H6.33334L13.8377 20.125L10.9875 28.9479L18.4918 23.4792L23.1099 20.125L30.5781 14.6563Z"
fill="white"
/>
</svg>
<svg
width="36"
height="35"
viewBox="0 0 36 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M35.5 0H0.5V35H35.5V0Z" fill="#00B67A" />
<path
d="M18.4557 23.5156L23.7232 22.1667L25.924 29.0208L18.4557 23.5156ZM30.5781 14.6563H21.3059L18.4557 5.83334L15.6055 14.6563H6.33334L13.8377 20.125L10.9875 28.9479L18.4918 23.4792L23.1099 20.125L30.5781 14.6563Z"
fill="white"
/>
</svg>
</div>
<div class="trust-pilot">Rated Excellent on TrustPilot</div>
</div>

<footer
style="
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
line-height: 15px;
font-size: 10px;
font-weight: 400;
"
>
<!-- Icons -->
<div>
<a href="https://www.facebook.com/MenofManual">
<svg
width="30"
height="31"
viewBox="0 0 30 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M29.4 15.4C29.4 23.3524 22.9536 29.8 15 29.8C7.04641 29.8 0.600006 23.3524 0.600006 15.4C0.600006 7.4464 7.04641 1 15 1C22.9536 1 29.4 7.4464 29.4 15.4Z"
stroke="#0B3B3C"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.1834 13.0811H16.0216V12.1355C16.0216 11.6519 16.3432 11.5373 16.5688 11.5373H17.8708V9.40555L15.6976 9.40015C13.5736 9.40015 13.2478 10.9889 13.2478 12.0047V13.0811H11.3998V14.9291H13.2484V21.4001H16.0216V14.9297H17.9584L18.1834 13.0811Z"
fill="#0B3B3C"
/>
</svg>
</a>
<a href="https://twitter.com/MenofManual">
<svg
width="30"
height="31"
viewBox="0 0 30 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.9999 11.1329C20.9999 11.1329 19.7285 11.2703 19.1651 11.3831C18.7923 10.9848 18.2985 10.7208 17.7603 10.632C17.2221 10.5431 16.6697 10.6344 16.1887 10.8917C15.7077 11.149 15.3251 11.5579 15.1003 12.0549C14.8754 12.5518 14.821 13.1092 14.9453 13.6403C13.9605 13.5916 12.997 13.336 12.1175 12.8901C11.2381 12.4442 10.4624 11.8181 9.84111 11.0525C9.52355 11.5976 9.42595 12.2433 9.56822 12.8579C9.7105 13.4724 10.0819 14.0096 10.6067 14.3597C10.2136 14.3464 9.82931 14.2401 9.48531 14.0495V14.0825C9.48538 14.654 9.6832 15.2079 10.0452 15.6502C10.4072 16.0924 10.9111 16.3958 11.4713 16.5089C11.107 16.6077 10.725 16.6225 10.3541 16.5521C10.5121 17.0441 10.82 17.4744 11.2346 17.7828C11.6492 18.0912 12.1498 18.2624 12.6665 18.2723C11.6283 19.0861 10.3095 19.4545 8.99991 19.2965C10.1321 20.0246 11.45 20.4114 12.7961 20.4107C17.3513 20.4107 19.8419 16.6361 19.8419 13.3643C19.8419 13.2563 19.8407 13.1501 19.8353 13.0433C20.3189 12.6935 20.6687 11.6303 20.9999 11.1329Z"
fill="#0B3B3C"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M29.4 15.8001C29.4 23.7537 22.9536 30.2001 15 30.2001C7.04641 30.2001 0.600006 23.7537 0.600006 15.8001C0.600006 7.84655 7.04641 1.40015 15 1.40015C22.9536 1.40015 29.4 7.84655 29.4 15.8001Z"
stroke="#0B3B3C"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<a href="https://www.instagram.com/menofmanual/">
<svg
width="30"
height="31"
viewBox="0 0 30 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M29.4 15.4C29.4 23.3524 22.9536 29.8 15 29.8C7.04641 29.8 0.600006 23.3524 0.600006 15.4C0.600006 7.4464 7.04641 1 15 1C22.9536 1 29.4 7.4464 29.4 15.4Z"
stroke="#0B3B3C"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.8459 21.4001H11.1539C10.5826 21.4001 10.0348 21.1732 9.6308 20.7693C9.22685 20.3653 8.99991 19.8174 8.99991 19.2461V11.5523C9.00039 10.9814 9.22754 10.434 9.63144 10.0304C10.0353 9.62684 10.5829 9.40015 11.1539 9.40015H18.8459C19.417 9.40015 19.9647 9.62692 20.3686 10.0306C20.7725 10.4343 20.9996 10.9819 20.9999 11.5529V19.2455C21 19.5285 20.9443 19.8086 20.8361 20.07C20.7279 20.3314 20.5693 20.569 20.3692 20.769C20.1692 20.9691 19.9317 21.1278 19.6703 21.2361C19.409 21.3444 19.1288 21.4001 18.8459 21.4001ZM18.1451 15.2603C18.145 14.829 18.06 14.4018 17.8948 14.0033C17.7297 13.6048 17.4876 13.2427 17.1825 12.9377C16.8774 12.6327 16.5153 12.3908 16.1167 12.2258C15.7181 12.0608 15.2909 11.9759 14.8595 11.9759C14.4281 11.976 14.001 12.0611 13.6024 12.2262C13.2039 12.3914 12.8418 12.6334 12.5368 12.9385C12.2319 13.2436 11.9899 13.6058 11.8249 14.0044C11.6599 14.403 11.575 14.8302 11.5751 15.2615C11.5753 16.1328 11.9215 16.9683 12.5377 17.5842C13.1539 18.2002 13.9895 18.5461 14.8607 18.5459C15.7319 18.5458 16.5674 18.1995 17.1834 17.5834C17.7993 16.9672 18.1453 16.1316 18.1451 15.2603ZM19.6907 11.6543C19.6907 11.3297 19.5618 11.0184 19.3322 10.7888C19.1027 10.5593 18.7913 10.4303 18.4667 10.4303C18.1421 10.4303 17.8308 10.5593 17.6012 10.7888C17.3717 11.0184 17.2427 11.3297 17.2427 11.6543C17.2427 11.979 17.3717 12.2903 17.6012 12.5198C17.8308 12.7494 18.1421 12.8783 18.4667 12.8783C18.7913 12.8783 19.1027 12.7494 19.3322 12.5198C19.5618 12.2903 19.6907 11.979 19.6907 11.6543Z"
fill="#0B3B3C"
stroke="#0B3B3C"
stroke-linejoin="round"
/>
</svg>
</a>
</div>

<!-- footer body -->
<div style="width: 266px">
<p>
If you have any questions about your order, please contact Manual
Store UK at
<a style="color: #7e0707" href="mailto:help@manual.co"
>help@manual.co</a
>.
</p>
</div>

<div style="font-weight: bold">
<a style="margin-right: 2px" href="https://help.manual.co/">FAQ</a>
<a style="margin-right: 2px" href="https://www.manual.co/pages/terms"
>T&Cs</a
>
<a
style="margin-right: 2px"
href="https://www.manual.co/pages/privacy"
>Privacy Policy</a
>
<a style="margin-right: 2px" href="https://www.manual.co/pages/terms"
>Terms of Sale</a
>
<a
style="margin-right: 2px"
href="https://www.manual.co/pages/complaints"
>Complaints</a
>
</div>

<div style="width: 266px">
<p>
© 2020 Manual. 110 Clifton Street, London EC2A 4HT, United Kingdom.
</p>
</div>

<div style="padding-bottom: 40px">
<a href="https://www.manual.co/">
<svg
width="30"
height="29"
viewBox="0 0 30 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.02462 26.9788C7.51614 26.9788 7.19835 26.593 7.19835 25.9619C7.19835 22.9795 13.1161 16.2052 19.0195 10.4629C18.0214 16.912 11.4264 26.9788 8.02462 26.9788ZM29.2082 0.327307C28.3958 0.346883 26.7293 0.409934 25.2674 0.430909C24.7531 0.438282 24.5477 0.66932 24.6136 1.00097C24.6913 1.3918 24.9488 1.68118 25.3363 1.69142C25.8353 1.70464 26.5037 1.62131 27.3606 1.57917C25.4125 3.07803 23.0556 5.04811 20.6239 7.24002C20.3382 5.03483 19.3159 3.27118 17.3043 3.27118C14.3806 3.27118 11.4568 7.72034 10.1856 10.1992C10.0585 8.16525 9.16869 6.25847 7.26191 6.25847C3.29759 6.25847 0 15.2794 0 16.6294C0 17.0909 0.527797 17.4449 0.845593 17.4449C1.22695 17.4449 1.35089 17.2542 1.47801 16.8093C3.13055 11.4068 5.60936 7.65678 7.26191 7.65678C8.08818 7.65678 8.72377 8.61017 8.72377 10.8347C8.72377 12.4715 8.44494 13.4653 8.44494 13.8532C8.44494 14.4592 8.97801 14.7754 9.2958 14.7754C9.67716 14.7754 9.80428 14.5847 9.99496 14.1398C11.9017 9.43644 15.0161 4.73305 17.2407 4.73305C18.3362 4.73305 19.0814 6.13231 19.1429 8.59447C12.4733 14.7822 5.75352 22.2387 5.75352 25.9068C5.75352 27.4335 6.5953 28.3136 7.96106 28.3136C12.8645 28.3136 20.5388 16.1268 20.7058 8.84966C23.4346 6.28205 26.0366 4.03993 27.9092 2.61328C27.6208 3.32864 27.3303 4.02443 27.1824 4.54377C27.0742 4.92373 27.1401 5.3415 27.6071 5.52309C27.9024 5.63794 28.1656 5.47148 28.2813 5.14142C28.985 3.13364 29.3475 2.3101 29.7779 1.1614C30.0594 0.410061 30.0294 0.30754 29.2082 0.327307Z"
fill="#0B3B3C"
/>
</svg>
</a>
</div>
</footer>

<!-- <p style="text-align: center; font-size: 7pt">
<span style="color: #777777">{{delimiter}}</span>
</p>
<table
width="600"
border="0"
cellpadding="5"
cellspacing="0"
style="margin: auto"
>
<tr>
<td style="padding-bottom: 25px">{{content}}</td>
</tr>
</table> -->
</div>
</body>
</html>

    1 reply

    Daniel18
    • Daniel18
    • April 17, 2022

    Gmail is somewhat particular with what they allow, and in some cases they'll disregard a block of code if there's something they don't support.

    Just glancing at your CSS, I can already see that you're using pseudo-classes like a:visited and a:active which aren't supported. So that could be one issue. 

    Take a look at this article: 

    https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps-2/

    I'd also recommend signing up for an email testing solution, which will allow you to see how the email will render in various clients. 

    Email on Acid (from the link above) is one option. I've personally used Litmus for Zendesk email templates, and it worked fairly well. See here: 

    https://www.litmus.com/role/designers-developers/

    Hope this helps a bit. 

    Terms & ConditionsCookie settingsAccessibility statement