mj-columns in gmail looking as mobile view not flexed
Kiliusz opened this issue · comments
Describe the bug
Im sending emails using generated html from mjml. Im sending emails using thunderbird or webmail roundcube both clients giving same results. When i preview emails in thunderbird i have nice 3 columns but in gmail on web i have mobile view (columns are stacked).
I tried to narrow the bug, and i just copy the template from mjml minify it in live preview and send such html. I got the same result stacked columns. I paste below code from live view with just 1 section with columns.
To Reproduce
<mjml> <mj-body background-color="#d7dde5"> <mj-section background-color="#ffffff" vertical-align="top" full-width="full-width"> <mj-column vertical-align="top" width="33.33333333333333%"> <mj-image src="http://191n.mj.am/img/191n/1t/hs.png" alt="" width="50px"></mj-image> <mj-text align="center" color="#9da3a3" font-size="11px" padding-bottom="30px"><span style="font-size: 14px; color: #e85034">Best audience</span><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</mj-text> </mj-column> <mj-column vertical-align="top" width="33.33333333333333%"> <mj-image src="http://191n.mj.am/img/191n/1t/hm.png" alt="" width="50px"></mj-image> <mj-text align="center" color="#9da3a3" font-size="11px" padding-bottom="30px"><span style="font-size: 14px; color: #e85034">Higher rates</span><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</mj-text> </mj-column> <mj-column vertical-align="top" width="33.33333333333333%"> <mj-image src="http://191n.mj.am/img/191n/1t/hl.png" alt="" width="50px"></mj-image> <mj-text align="center" color="#9da3a3" font-size="11px" padding-bottom="30px" padding-top="3px"><span style="font-size: 14px; color: #e85034">24/7 Support</span><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend sagittis nunc, et fermentum est ullamcorper dignissim.</mj-text> </mj-column> </mj-section> </mj-body> </mjml>
Expected behavior
columns are displayed horizontaly on desktop view, not stacked.
Additional context
When i send emails using putsmail, it displays properly in gmail.
Yeah you can't send HTML emails from your email client as it alter the html. There's nothing we can do about that.