Bug: invalid mj-column css generated. 2 column layouts impossible

[linuxd3v]

I've noticed that I cannot create 2 column layouts.

What I have :

1. mj-breakpoint = 380px
2. section + 2 columns

    <mj-section padding-bottom="20px" padding-left="0px" background-color="transparent" border-radius="0px" text-align="center" border-right="none" padding-top="20px" border-bottom="none" direction="ltr" background-repeat="no-repeat" background-size="auto" border-top="none" border-left="none" padding-right="0px" background-position="top center" border="none">
      <mj-column border="none" border-right="none" inner-border="none" inner-border-top="none" border-bottom="none" border-radius="0px" inner-border-left="none" width="50%" vertical-align="top" inner-border-bottom="none" border-left="none" inner-background-color="transparent" inner-border-right="none" border-top="none" padding-right="0px" padding-bottom="0px" padding-left="0px" inner-border-radius="0px" background-color="transparent" padding-top="0px">
        <mj-text color="#000000" font-weight="normal" padding-left="25px" font-family="Lora, Georgia, serif" font-style="normal" text-decoration="none" padding-top="10px" padding-bottom="10px" font-size="14px" line-height="1.5" padding-right="25px" background-color="transparent" align="left" text-transform="none"><p>Section 13a sadgsagsadg dsa gdsa gdsag dsa gdsagsad</p></mj-text>
      </mj-column>
      <mj-column inner-border-radius="0px" border="none" border-bottom="none" border-radius="0px" padding-bottom="0px" inner-border-top="none" border-top="none" width="50%" inner-border-bottom="none" inner-border-left="none" inner-border-right="none" vertical-align="top" padding-left="0px" padding-right="0px" border-right="none" inner-border="none" inner-background-color="transparent" border-left="none" background-color="transparent" padding-top="0px">
        <mj-text text-decoration="none" align="left" font-family="Lora, Georgia, serif" text-transform="none" padding-top="10px" background-color="transparent" font-size="14px" line-height="1.5" color="#000000" font-style="normal" padding-right="25px" padding-bottom="10px" padding-left="25px" font-weight="normal"><p>Column 2dsa gdsa gdsa gsag dsag sag dsgdsa g</p></mj-text>
      </mj-column>
    </mj-section>

but in email - it renders always stacked in mobile and desktop:

After some digging - I see that CSS generated and sent has a bug, notice that css class is missing period - mj-column-per-50 - so class is never applied:

    <style type="text/css">
      @media only screen and (min-width:380px) {
        .mj-column-per-100 { width:100% !important; max-width: 100%; }
mj-column-per-50 { width:50% !important; max-width: 50%; }
      }
    </style>
    <style media="screen and (min-width:380px)">
      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }
    </style>
```

[linuxd3v]

Temporary workaround - adding this custom css fixes columns - tested in gmail, yahoo, protonmail web clients:

/*temporary responsive columns workaround. Note  I use 380px breakpoint here */
@media screen and (min-width:380px) {
  .mj-column-per-100,
  .moz-text-html .mj-column-per-100 { width:100% !important; max-width:100%; }

  .mj-column-per-50,
  .moz-text-html .mj-column-per-50 { width:50% !important; max-width:50%; }
}

[pierre-b]

Hi @linuxd3v , this is a feature from MJML, not a bug: https://documentation.mjml.io/#mj-group

[linuxd3v]

@pierre-b css is broken.

moz-text-html is invalid class. missing dot/period in front to be valid CSS.

    <style media="screen and (min-width:380px)">
**moz-text-html** .mj-column-per-50 { width:50% !important; max-width: 50%; }
    </style>

[pierre-b]

is this css generated by the mjml lib or notifuse?

[linuxd3v]

Not sure. I'll try to trace it.
but currently - mj-columns dont seem to work out of the box in notifuse. I dont use mj-group

[pierre-b]

MJML always stack columns on mobile, it's by design. The way to force side-by-side columns in MJML is to wrap them in mj-gorup.

[linuxd3v]

MJML always stack columns on mobile, it's by design. The way to force side-by-side columns in MJML is to wrap them in mj-gorup.

Issue is in the desktop. Columns are supposed to render as columns in desktop and stack in mobile.
But they dont - they always render stacked in mobile and desktop. Try it - send an email with 2 columns - desktop always stacked. (preview looks fine, but actual email columns are not working)

[pierre-b]

I can't reproduce it, the HTML generated by MJML with 2 columns renders 2 columns side-by-side on desktop.

[linuxd3v]

@pierre-b mj-columns show up fine in the preview.
but not in the actual email. try sending a test email to gmail for example and check it out in web gmail.com - those will show up stacked.

[pierre-b]

Yes I managed to reproduce it now... I hope we can fix it because it seems to come from the MJML lib output.... :(

[linuxd3v]

github.com/Boostport/mjml-go v0.15.0

seems like they have 0.16 upstream. maybe it has a fix

[linuxd3v]

https://github.com/Boostport/mjml-go/releases/tag/v0.16.0

Update benchmarks

doesnt look it

[pierre-b]

I will test with https://github.com/preslavrachev/gomjml ...