Why does outlook cut off some images for the email templates made with mjml?

Question

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 &amp; start saving $$$ with our Beauty? Health &amp; Wellness Platform, <br><br> Our mission is to provide the convenience of being able to search &amp; shop for all your Health. Beauty &amp: 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.">&nbsp: </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> &nbsp: <:-- 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 &amp: 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>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp; <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>

Answer 1

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.