emailwidthmultiple-columnsinlinemjml

How to set a fixed width for columns in mjml?


How to set a fixed width for columns in mjml?

I do not want to have classes or media queries for columns. I just want the columns to have a fixed width and I want that width to be a part of inlined styles for a column.

I need this, because, during forwarding Outlook removes all the classes and the classes which specify width for columns get stripped off as well. Also, I do not care about responsiveness.


Solution

    1. If it is ambiguous whether you've used mj-column > width, I should suggest that as the first step. Perhaps you've used it.

    2. Paradoxically, I'll suggest using mj-style inline="inline". In your MJML, target the HTML element you need using the technique suggested in https://documentation.mjml.io/#mj-html-attributes and Difficulty in understanding CSS-styling in MJML

    If I understand your use case right, you need to get the necessary HTML attributes inside the HTML elements. MJML will put yours there because of the inline="inline" instruction above. That's the first HTML, the file MJML creates. With luck, the email client doing the forwarding won't change that. Maybe no client will change those; test carefully.

    Your use case is challenging. Meeting the challenge of creating a generally forwardable email is huge; it's tough to know all possible modifications made at any one export or import at an email client, let alone the combined effect of combinations of clients. MJML typically makes email authors more efficient in getting email into all email clients the first time; MJML doesn't try to support forwarding. Each forward requires an export from the first email client and an import into the second. See https://www.litmus.com/blog/when-forwarded-emails-break/

    BTW: In addition to StackOverflow, a great source of MJML support is https://mjml.slack.com/ You probably would have gotten a more prompt response there than this one. (Sorry!)