Mjml: full-width mj-wrapper break rendering on outlook desktop

Created on 26 Oct 2018 · 8Comments · Source: mjmlio/mjml

Describe the bug
Hi, I have got problem with mj-wrapper on Outlook 2016 and Outlook 2013 120 DPI whole email content is on the left site. On other clients it works fine. When i delete mj-wrapper email backs to normal (center). (2) And background is repeating when repeating is set to none.

To Reproduce

<mjml>
    <mj-body width="600">
        <mj-wrapper full-width="full-width" background-url="https://cdn2.hubspot.net/hubfs/3297259/OnBoarding/Welcome%20Email/back.png"
            padding-bottom="0" background-repeat="no-repeat">


            <mj-section text-align="center" padding-bottom="30px">

                <mj-column>
                    <mj-image align="center" src="http://placekitten.com/130/42" width="132px" height="42px"></mj-image>
                    <mj-text padding="20px" padding-top="30px" color="#ffffff" font-family="Roboto,Arial" align="center"
                        font-size="55px" line-height="55px" letter-spacing="-2px" font-weight="700">
                        Welcome to the family!
                    </mj-text>


                    <mj-text padding="20px" color="#ffffff" font-family="Roboto,Arial" align="center" font-size="18px"
                        line-height="20px" letter-spacing="0">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to m
                    </mj-text>

                    <mj-image align="center" border="none" padding-bottom="0px" src="http://placekitten.com/200/100"
                        title="" width="400px" href=""></mj-image>


                </mj-column>

            </mj-section>



            <mj-section background-color="white" padding-bottom="10px">
                <mj-column>
                    <mj-text color="black" font-family="Roboto,Arial" align="center" font-size="16px" line-height="20px"
                        letter-spacing="0">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to m
                    </mj-text>
                    <mj-spacer height="20px"> </mj-spacer>
                    <mj-image src="http://placekitten.com/230/100" width="230px" height="50px">
                    </mj-image>

                    <mj-spacer height="10px"> </mj-spacer>


                    <mj-text color="black" font-family="Roboto,Arial" align="center" font-size="16px" line-height="20px"
                        letter-spacing="0">

                        <span><a style="color:#F43C7B">Learn how to install </a></span>
                    </mj-text>



                </mj-column>

            </mj-section>


            <mj-section padding-top="0px">

                <mj-column width="40%" background-color="#FFFFFF">
                    <mj-image src="http://placekitten.com/216/150" width="216px" alt="" align="center" border="none"></mj-image>
                </mj-column>
                <mj-column width="60%" vertical-align="middle">
                    <mj-spacer height="35px"></mj-spacer>
                    <mj-text padding="25px" color="black" font-family="Roboto,Arial" align="left" font-size="16px"
                        line-height="20px" letter-spacing="0px">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
                        of type and scrambled it to m
                    </mj-text>

                </mj-column>




            </mj-section>


            <mj-section>


                <mj-column vertical-align="middle">

                    <mj-text color="#303F9F" font-family="Roboto, cursive,Roboto,Arial" align="center" font-size="34px"
                        line-height="40px" font-weight="700" padding-left="40px" padding-right="40px">Lorem Ipsum is
                    </mj-text>


                </mj-column>




            </mj-section>

            <mj-section padding-bottom="0px">


                <mj-column vertical-align="middle">

                    <mj-text color="black" font-family="Roboto,Arial" align="left" font-size="16px" line-height="20px">Best
                        regards, </br>
                    </mj-text>


                </mj-column>




            </mj-section>



            <mj-section vertical-align="top" padding-top="0px" padding-left="0px" padding="0px 0px 0px 0px" full-width="full-width">

                <mj-column width="600px" padding="0px 0px 0px 0px" background-color="white">

                    <mj-image align="center" border="none" padding-bottom="0px" padding-left="0px" padding-right="0px"
                        padding="0px 25px" src="http://placekitten.com/780/500" title="" width="600px"></mj-image>
                </mj-column>
            </mj-section>


            <mj-section padding-top="40px" text-align="center">
                <mj-column>
                    <mj-image src="http://placekitten.com/230/100" width="80px" height="26px"></mj-image>

                    <mj-text font-family="Arial" font-size="12px" line-height="16px" color="#939eb4">
                        <p style="line-height: 16px; text-align: center; margin: 10px 0;font-size:12px;color:#939eb4;font-family:'Roboto',Arial,sans-serif">Copyright
                            © 2018 {{ site_settings.company_name }}, All rights reserved. </br>


                            {{ site_settings.company_street_address_1 }}&nbsp;<br /> {{ site_settings.company_city
                            }}&nbsp; {{ site_settings.company_state }}&nbsp; {{ site_settings.company_zip }}&nbsp; {{
                            site_settings.company_country }}&nbsp;
                            </br>
                            Want to change how you receive these emails?<br /> You can <a href="{{ unsubscribe_link }}"
                                target="_blank" style="text-decoration:underline; color:#939eb4;">update your
                                preferences</a> or <span class="em_br"></span><a href="{{unsubscribe_link_all}}" target="_blank"
                                style="text-decoration:underline; color:#939eb4;">unsubscribe from this list</a>.</p>
                    </mj-text>
                </mj-column>



            </mj-section>



        </mj-wrapper>

    </mj-body>
</mjml>

Expected behavior
Content: center. Background-repeat: none

MJML environment (please complete the following information):

OS: Windows
MJML Version 4.1.2
MJML tool used MJML App 2.10.0

Affected email clients (for rendering issues):

Email Client Office 2016, Office 2019, Outlook 2013 120 DPI
OS: Windows 7

Screenshots

https://ibb.co/j8ZxwV
https://ibb.co/feGXVq

Source

ProdigyMaster

😕1

Most helpful comment

Editing the title to reflect the issue

iRyusa on 29 Nov 2018

👍2

All 8 comments

Somebody something? :(

ProdigyMaster on 31 Oct 2018

Hi @ProdigyMaster, i made some tests, but that's not an easy one, the full-width wrapper with background-src is not handled well on this outlook version indeed.
Adding position:relative; in the <v:rect style fixes part of the problem but i saw other bugs appear, depending on the content of the email...
I'll make more tests in a near future

kmcb777 on 31 Oct 2018

👍1

Well as "full width" wrapper is quite new in MJML4 for outlook, I think we never tested it in wrapper 🤔

About the no-repeat being ignore, desktop outlook doesn't support such feature so there's no way to do this

iRyusa on 6 Nov 2018

I'm having the same problem. Is there a workaround for making a repeating background image extend to full width that works in Outlook?

Here is an example of how I'm trying to use the full-width in mj-wrapper with a background image

<mjml>
  <mj-body background-color="#2f425f">

    <!-- full-width changes background from 600px to 100% max-width but is broken on outlook 2019-->
    <mj-wrapper
      css-class="wrapper"
      background-url="https://res.cloudinary.com/saasquatch/image/upload/v1541004426/tile-jobstack-background_mmciwg.png" 
      background-repeat="repeat"
      background-size="200px"
      full-width="full-width"
      >

      <!-- Header Section -->
      <mj-section padding="5px 0 5px 0">
        <mj-column 
          background-color="#fff"
          border-radius="10px 10px 5px 5px">
          <mj-image 
            width="400px" 
            src="https://www.petsworld.in/blog/wp-content/uploads/2014/09/cute-kittens.jpg"
            border-radius="5px 5px 0px 0px"
            padding="0px"
            >
          </mj-image>

          <mj-text 
            align="left" 
            font-size="24px" 
            font-weight="bold" 
            color="#000000" 
            font-family="Arial, sans-serif" 
            padding="20px 10px 5px 15px">
              Good News!
          </mj-text>


        </mj-column>
      </mj-section>


    </mj-wrapper>
  </mj-body>
</mjml>

On a side note, I'm loving mjml.

cbot83 on 20 Nov 2018

This is my current best workaround

;TLDR

I set the body to width=1200px
The background is still in the mj-wrapper
all the columns are set to width=600px

It's probably not perfect, but it's looking correct in our supported email clients.

UPDATE: this work around only works if you have one column in your email. I also had to set the column widths to 800px to keep it from breaking on outlook.com. So... not a great solution.

<mjml>
  <!-- set body width to hardcoded 1200px -->
  <mj-body background-color="#2f425f" width="1200px">
    <!-- removed full width from wrapper-->
    <mj-wrapper
      css-class="wrapper"
      background-url="https://res.cloudinary.com/saasquatch/image/upload/v1541004426/tile-jobstack-background_mmciwg.png" 
      background-repeat="repeat"
      background-size="200px"
      >

      <!-- Header Section -->
      <!-- set column to hard coded 600px -->
      <mj-section padding="5px 0 5px 0">
        <mj-column 
          background-color="#fff"
          border-radius="10px 10px 5px 5px"

          width="600px">
          <mj-image 
            width="400px" 
            src="https://www.petsworld.in/blog/wp-content/uploads/2014/09/cute-kittens.jpg"
            border-radius="5px 5px 0px 0px"
            padding="0px"
            >
          </mj-image>

          <mj-text 
            align="left" 
            font-size="24px" 
            font-weight="bold" 
            color="#000000" 
            font-family="Arial, sans-serif" 
            padding="20px 10px 5px 15px">
              Good News!
          </mj-text>


        </mj-column>
      </mj-section>


    </mj-wrapper>
  </mj-body>
</mjml>

cbot83 on 20 Nov 2018

👍1

Editing the title to reflect the issue

iRyusa on 29 Nov 2018

👍2

Is it possible to limit the width of the mj-wrapper? In the outlook, the background is repeated not only vertically, but also horizontally. Limiting the width would solve background repeating problem.

ProdigyMaster on 19 Dec 2018

Hello! I got the same problem (content is on the left side in Outlook 2016/2019) if using mj-wrapper for background with full-width.

Does this problem have a workaround?

We used css class for mj-body with background-image property and not used mj-wrapper (in Outlook background not displayed but the content have normal view).
But I think it's not a best solution.

UPD:

All work fine if disabled blocking autoload images in Outlook settings