Why does outlook cut off some images for the email templates made with mjml?
So I have made the following templates with mjml. And for some strange reason the app links button images are not getting full height.Also, same happening for the social links icon images too. For both set of images I tried wrapping the icon images inside anchor tag, and then giving explicit height to both images and anchor element but still no luck.
<mjml>
<mj-head>
<mj-font name="Questrial" href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" />
<mj-attributes>
<mj-text font-family="Questrial, sans-serif" font-size="16px" color="#353b48" padding="0px" line-height="24px" />
<mj-section padding="0px" />
<mj-image padding="0px" />
<mj-button background-color="#75bac4" font-size="15px" color="#ffffff" font-family="Inter, sans-serif" text-transform="uppercase" border-radius="50px" font-weight="500" />
</mj-attributes>
<mj-style>
@font-face {
font-family: "Malina";
src: local('Malina1'), url("fonts/Malina1.woff2") format("woff2"),
url("fonts/Malina1.woff") format("woff"),
url("fonts/Malina1.ttf") format("truetype"),
url("fonts/Malina1.otf") format("opentype")
}
</mj-style>
</mj-head>
<mj-body width="600px" background-color="#fff">
<!-- 01:logo -->
<mj-section border-top="1px solid #e6e6e6" border-left=" 1px solid #e6e6e6" border-right="1px solid #e6e6e6" padding-top="30px">
<mj-column width="100%">
<mj-image width="540px" src="https://i.imgur.com/y5pjEGu.png" alt="logo" />
</mj-column>
</mj-section>
<!-- middle section 02 -->
<mj-section padding="48px 30px 0px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-column width="100%">
<mj-text align="left" color="#141414">
Hi Jenny,
</mj-text>
<mj-spacer height="8px" />
<mj-text>
Welcome to FreshFeelz
<br><br>
Are you ready to Feel Fresh & start saving $$$ with our Beauty, Health & Wellness Platform?
<br><br>
Our mission is to provide the convenience of being able to search
& shop for all your Health, Beauty & Wellness needs with just a few clicks
at affordable prices.
</mj-text>
<mj-spacer height="60px" />
</mj-column>
</mj-section>
<!-- how it works -->
<mj-section padding="0px 30px 0px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-column width="100%">
<mj-text align="center" font-size="21px" line-height="24px">
FreshFeelz works in 3 simple steps
</mj-text>
<mj-spacer height="30px" />
</mj-column>
</mj-section>
<!-- 3 column features -->
<mj-section border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<!-- step 1 -->
<mj-column width="160px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/PZYQJcT.png" height="50px" width="50px" />
<mj-spacer height="10px" />
<mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
STEP 1
</mj-text>
<mj-spacer height="10px" />
<mj-text align="center">
Find a deal or product
</mj-text>
</mj-column>
<mj-column width="40px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/wnzirMx.png" height="40px" width="40px" />
</mj-column>
<!-- step 2 -->
<mj-column width="160px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/PZYQJcT.png" height="50px" width="50px" />
<mj-spacer height="10px" />
<mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
STEP 2
</mj-text>
<mj-spacer height="10px" />
<mj-text align="center">
Select your payment method. We also offer
</mj-text>
<mj-spacer height="10px" />
<mj-image src="https://i.imgur.com/tpQdjo8.png" width="121px" height="25px" />
</mj-column>
<mj-column width="40px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/wnzirMx.png" height="40px" width="40px" />
</mj-column>
<!-- step 3 -->
<mj-column width="160px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/PZYQJcT.png" height="50px" width="50px" />
<mj-spacer height="10px" />
<mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
STEP 3
</mj-text>
<mj-spacer height="10px" />
<mj-text align="center">
Get in touch with the business to redeem your deal or enter delivery details.
</mj-text>
<mj-spacer height="60px" />
</mj-column>
</mj-section>
<!-- login details -->
<mj-wrapper padding="0px 30px 60px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-section background-color="#eaeee2" padding="25px 0px">
<mj-column width="38%" vertical-align="middle">
<mj-text align="left" font-size="21px" line-height="30px" letter-spacing="2.1px">
LOGIN DETAILS
</mj-text>
</mj-column>
<mj-column width="50%" vertical-align="middle">
<mj-text>
Email: as13@xenex-media.com.au
<br>
</mj-text>
<mj-text>
Password: @xenex1234
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- Get Rewarded -->
<mj-section padding="0px 0px 0px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-column width="51%" vertical-align="middle">
<mj-text font-family="Malina" font-size="40px" line-height="36px" color="#141414">
Get Rewarded
</mj-text>
<mj-spacer height="20px" />
<mj-text>
When a new user registers using your code they will receive $5 credit to use on their first purchase.
</mj-text>
<mj-spacer height="20px" />
<mj-text font-size="21px" line-height="24px" color="#141414" align="center">
<div style="max-width:255px;background-image:url('https://i.imgur.com/aXq47yg.png');background-size: cover;background-position: center;border-radius: 10px;padding:15px 0px;">
You will earn $1
<p style="font-family='Questrial';font-size:16px;line-height:24px;margin:0;">everytime they purchase.</p>
</div>
</mj-text>
<mj-spacer height="20px" />
<mj-text>
<p style="margin:0px 0px 10px 0px;">The more people you tell the more you earn!</p>
<div class="spacer" style="margin-bottom:16px;border-bottom:1px solid #353b48;line-height:6px;height:6px;mso-line-height-rule:exactly;">
</div>
</mj-text>
<mj-text>
<span style="font-family:Questrial;color:#141414;">Referral Code:</span> FFAJV1
</mj-text>
</mj-column>
<mj-column width="49%" vertical-align="middle" padding-top="30px">
<mj-image src="https://i.imgur.com/zaas7HS.png" width="300px" />
</mj-column>
</mj-section>
<!-- introductory offer -->
<mj-section border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6" padding="60px 30px">
<mj-column width="100%">
<mj-image src="https://i.imgur.com/aSyFabQ.png" width="60px" height="60px" />
<mj-spacer height="10px" />
<mj-text align="center" font-size="36px" line-height="36px" color="#141414">
Introductory Offer
</mj-text>
<mj-spacer height="20px" />
<mj-text align="center" font-size="18px" line-height="30px">
Reply to this email with “I’m feeling Fresh” to receive
$10 credits towards your first purchase.
</mj-text>
</mj-column>
</mj-section>
<!-- download the app -->
<mj-section padding="0px 0px 60px 0px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-column width="255px" vertical-align="middle" padding="0px 15px 0px 0px ">
<mj-image src="https://i.imgur.com/nvgV3kv.png" width="255px" />
</mj-column>
<mj-column width="263px" vertical-align="middle" padding="15px">
<mj-text font-size="18px" line-height="30px">
Stay up-to-date with your
FreshFeelz bookings
</mj-text>
<mj-spacer height="10px" />
<mj-text>
Our app lets you discover new deals,
make bookings and earn rewards.
</mj-text>
<mj-spacer height="20px" />
<mj-text align="left">
<!-- appstore -->
<a href="#" style="text-decoration: none;display:inline-block;height:35px;"><img src="https://i.imgur.com/xVnQerH.png" width="115" style="height:35px" height="35" /></a>
<!-- google play -->
<a href="#" style="text-decoration: none;display:inline-block;height:35px;"><img src="https://i.imgur.com/Zk4J2eA.png" width="105" height="35" style="height:35px;" /></a>
</mj-text>
</mj-column>
</mj-section>
<!-- 03:footer Main -->
<mj-section padding="30px 15px" background-color="#ebe5d6">
<mj-column width="75%" vertical-align="middle">
<mj-text>
<a href="#" style="margin:0 10px;text-decoration: none;display:inline-block;color:#353b48">
Help Center
</a>
<a href="#" style="margin:0 10px;text-decoration: none;display:inline-block;color:#353b48">
Privacy Policy
</a>
<a href="#" style="margin:0 10px;text-decoration: none;display:inline-block;color:#353b48">
Terms & Conditions
</a>
</mj-text>
</mj-column>
<mj-column width="25%" vertical-align="middle">
<mj-text>
<a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/ssftYug.png" width="32" height="32" style="height:32px;" /></a>
<a href="#" style="text-decoration: none;display:inline-block;margin:0px 0px 0px 5px"><img src="https://i.imgur.com/vRERJBi.png" width="36" height="36" style="height:36px;" /></a>
<a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/Eu54USu.png" width="41" height="41" style="vertical-align:text-bottom;height:41px;" /></a>
</mj-text>
</mj-column>
</mj-section>
<!-- footer Secondary -->
<mj-section background-color="#92a294" padding="18px 0">
<mj-column width="100%">
<mj-text align="center" color="#fff">
<a href="#" style="text-decoration: none;display:inline-block;color:#fff;">
hello@freshfeelz.com.au</a> |
<a href="#" style="text-decoration: none;display:inline-block;color:#fff;">
www.freshfeelz.com.au</a> </a>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Solution
That usually happens when you have a line height set at the parent level. In your case you have a line height (after the code is compiled) at the div level. It seems <mj-text> puts in a line height of 16px by default.
As a walkaround you can add a line-height attribute at mj-text element as below:
<mj-text line-height="32px">
<a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/ssftYug.png" width="32" height="32" style="height:32px;" /></a>
<a href="#" style="text-decoration: none;display:inline-block;margin:0px 0px 0px 5px"><img src="https://i.imgur.com/vRERJBi.png" width="36" height="36" style="height:36px;" /></a>
<a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/Eu54USu.png" width="41" height="41" style="vertical-align:text-bottom;height:41px;" /></a>
</mj-text>
You can also use line-height="auto" but the live code editor throws an error even though the code output works fine.
- Trying to late bind outlook to but getting type mismatch error after create object line
- Change the separator line format between mails in Outlook
- How does one read a registry value using SCCM
- Loop to enter email address and attach applicable pdf
- For Each loop results in "Automation Error = For Loop not Initialized"
- Python obtain latest email from a sender using win32com.client
- VSCode throws errors for all mso properties...?
- Outlook addin Home tab with custom button
- Is there a way to send a 'reaction' emoji to an email in an outlook email account from thunderbird / programmatically?
- How can I send Excel range including header, in table, and email to list?
- Magic Link blocked by Outlook SafeLink policy
- Not able to connect to outlook.com SMTP using Nodemailer
- Permanently Delete MailMessage in Outlook with VBA?
- VBScript: Outlook signature creation - How to hyperlink telephone numbers?
- When i add the "ItemSend" Event handler in my add-ins manifest.xml thrown error while installing the add-ins
- Create Outlook appointment in subfolder/subcalendar with python
- Enable/Disable ribbon button based on MailItem subject (Outlook VSTO)
- CSS padding is not working as expected in Outlook
- How do I add multiple levels of subfolders?
- Error calling Office.context.mailbox.item.body.getTypeAsync when reading an Outlook message
- VBA for transfer emails from Outlook app to excel
- Outlook addinn Mailitem.forward more then one recipient returns exception
- Outlook not displaying a portion of HTML
- A new outlook sent Mailitem isn't moved to a destination folder
- Microsoft Graph APi users/{email}/messages error: Access is denied. Check credentials and try again
- Output does nothing when converting a df to ics
- Unable to cast COM object of type Outlook in vb.net
- Outlook using python win32com reading only email till a specific date and nothing after that
- Logic Apps email with options is not catching the response when using HTML Confirmation Dialog
- How do I stop Outlook from rendering an email address as a mailto: link?