Fix the height and width of a column in MJML

Question

I know that height is not a valid argument for mj-column but I would like to find a solution for this problem.

I have a mail template I would like to reproduce and don't find how to do it using MJML.

Here is the code that doesn't work :

  <mj-section>
    <mj-column width="300">
        <mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" ></mj-image>
    </mj-column>

    <mj-column background-color=yellow width="300">
    <mj-text mj-class="bigNumber"></mj-text>
    </mj-column>
  </mj-section>

It's the mj-column background-color=yellow that I would like to render the same on mobile.

When you look at this gif, you can see that when I resize the window, suddenly the width change and go back to normal. I don't understand why.

I've tried another way using mj-table but it doesn't act like I would like it to : put the mj-column below the image on mobile.

Did someone experience something similar and found a solution ?

Thank you

Answer 1

I put the background-color attribute on the <mj-section>.

It did what I wanted.

Sadly, MJML doesn't support any means of making columns equal height. To get the same effect, maybe you can put the same background-color on the section that you put on the shorter of the columns. It looks consistent that way.

Good luck!

Answer 2

You need to set mj-breakpoint. Before breakpoint width heppeneds layout will be desktop, but after breakpoint width it will be 100% width for all mj-column.

By default mj-breakpoint width 320px

In your case you need to set <mj-breakpoint width="300px" />

Sample: https://mjml.io/try-it-live/HkU5I3TFS