Mjml: fluid hero in outlook

[nickjl]

Hi, the fluid-height heros arent rendering correctly on Windows Outlook, any content beneath them renders in the hero (screenshot is two heros from MJML website and then some content underneath)

Expected behavior:

Three blocks should sit below each other

Screenshots and GIFs

MJML version:

4

Email clients the bug is seen on:

Windows Outlook

Also as part of heros, it would be great if they could have a href attribute that covers the whole hero.

Thanks.

[iRyusa]

Hi can you provide the MJML code you're using in order to reproduce please ?

Also as part of heros, it would be great if they could have a href attribute that covers the whole hero.

This cannot be done, it's the same issue for mj-button :)

[nickjl]

This is what Ive used:

<mj-hero
      mode='fluid-height'
      background-width='600px'
      background-height='469px'
      background-url='https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg'
      background-color='#2a3448'
      height='0px'
      padding='100px 0px'
      width='100%'>
      <!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component -->
      <mj-text
        padding='20px'
        color='#ffffff'
        font-family='Helvetica'
        align='center'
        font-size='45'
        line-height='45px'
        font-weight='900'>
        GO TO SPACE
      </mj-text>
      <mj-button href='https://mjml.io/' align='center'>
        ORDER YOUR TICKET NOW
      </mj-button>
    </mj-hero>

    <mj-hero
      mode='fluid-height'
      background-width='600px'
      background-height='469px'
      background-url='https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg'
      background-color='#2a3448'
      height='0px'
      padding='100px 0px'
      width='100%'>
      <!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component -->
      <mj-text
        padding='20px'
        color='#ffffff'
        font-family='Helvetica'
        align='center'
        font-size='45'
        line-height='45px'
        font-weight='900'>
        GO TO SPACE
      </mj-text>
      <mj-button href='https://mjml.io/' align='center'>
        ORDER YOUR TICKET NOW
      </mj-button>
    </mj-hero>

    <mj-section padding='30px 0 10px'>
        <mj-column vertical-align='middle' padding='0 10px 20px'>
            <mj-text font-size='40px' line-height='40px' padding='0'>
                title text
            </mj-text>

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

and then tested in litmus.

Ahh ok, we've just wrapped an anchor tag around the whole hero and this works for majority of major clients (and doesnt appear to cause any styling issues in clients that it doesnt work for), just thought that the main idea of a hero would be for it to be a CTA but understand if its a compatibility issue.

Thanks :)

[iRyusa]

The hero will not be clickable in Outlook then . We ll check that, thanks

On 25 Jun 2018, at 12:30, Nick Lupu [e-mail] wrote:

GO TO SPACE

ORDER YOUR TICKET NOW

mode='fluid-height'
background-width='600px'
background-height='469px'
background-url='https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg'
background-color='#2a3448'
height='0px'
padding='100px 0px'
width='100%'>

padding='20px'
color='#ffffff'
font-family='Helvetica'
align='center'
font-size='45'
line-height='45px'
font-weight='900'>
GO TO SPACE


ORDER YOUR TICKET NOW

title text

</mj-column>

is what I've used and then tested in litmus.

Ahh ok, we've just wrapped an anchor tag around the whole hero and this works for majority of major clients (and doesnt appear to cause any styling issues in clients that it doesnt work for), just thought that the main idea of a hero would be for it to be a CTA but understand if its a compatibility issue.

Thanks :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[nickjl]

Hi @iRyusa is this still more information needed?

[iRyusa]

Hi,

Sorry Cedric is on holidays and I have not so much time to check this for now. We'll get back on this issue asap, it's probably an issue with the VML generated. I wonder if it's related to #1281 but we'll investigate if it was already the case in 3.X branch.

[viniciusvinicius]

I am having the same problem with the hero in outlook. I was expecting that the hero and the sections would stack under each other. How can we fix this?

[iRyusa]

We're still working on a fix, we'll update here when we find why it behave like that.

[iRyusa]

After investigation it looks like this flaw of mjml-hero was already here for a long time :/

Best solution would be to use mj-section for fluid content... weird that we didn't saw this earlier

[osvaldasvalutis]

Any plans for fixing mj-hero?