Mjml: How to : Icon + Text

[hyakki]

Hi.

I've some hard time trying to do something simple in non-responsive emailing.

How would achieve to do this in a responsive way ?
The requierements would be:

• The icon size should be fixed, let's say 40x40
• The icon shouldn't go above/below the text in mobile's versions
• I would like to use raw html as less as possible

In a non-responsive way it would be easy to just make 3 columns with fixed widths, but using mjml i don't manage to have something that can work in both mobile/desktop versions. Can you help me about that ?

[hyakki]

After some deeper searches, i suppose the best way for me to accomplish that would be to use the mj-raw component. Something like this : https://mjml.io/try-it-live/rJWyXF_5e

Am i right ?
Of course it should be more emailing-way, but that's the main idea.

[ngarnier]

Hey @maximeparisse, there's a simple way to achieve a responsive layout like that, using 2 mj-column wrapped in a mj-group, which purpose is to prevent columns from stacking: https://mjml.io/documentation/#mjml-group (note the comment about iOS in the doc).

Demo: https://mjml.io/try-it-live/SJsS89Oql

If you want exact widths rather than relative, using HTML might be a solution, note that you can:

• use mj-table to include a table: https://mjml.io/documentation/#mjml-table
• use mj-text that supports any HTML

I'm closing as I think this should answer your question, but feel free to answer if it doesn't.