14

Good day, well I am using MJML framework to reach a template something like picture which is uploaded:

enter image description here

All of these works fine on MJML and I tested it when I send my template to my email, But the problem is that logo if you figured out that the logo is using a css to become out of the parent box, so I almost tried EVERYTHING for example I used transform and translate, negative margins, positions: absolute and relative to take it out of the box, But none of these are working and when I send my template to my e-mail address, I reach something like this:

enter image description here

I also did lots of research on Google, almost everyone said it's impossible to make something like that but I think it's possible. Can you guys tell me what's wrong with my MJML or Coding?

Jens
  • 5,767
  • 5
  • 54
  • 69
SoliMoli
  • 781
  • 2
  • 6
  • 25
  • 3
    It's possible by faking it and using an image that *doesn't* leave its table cell. Just make the background part of the image. –  Dec 21 '20 at 08:52
  • @ChrisG Thanks for your comment, You mean i use an image for my whole header instead of Coding it? If i understood you correct? well i thought that before to use a image trick on my whole header, But my lead UI guys don't accept that and they want me to make it by coding not image. – SoliMoli Dec 21 '20 at 08:55
  • 1
    A great and timely source of MJML info is https://slack.mjml.io/. Irregular boundaries/adhering to component boundaries has been discussed there with the MJML team. The conclusion then was that no MJML component includes irregular boundaries and all keep all their contents within their defined bounds. Has it changed? Doubt it, but ask there to get the team's opinion. That leaves your UI guys with the idea @ChrisG gave you. – BaldEagle Dec 22 '20 at 03:54
  • 7
    Your lead UI guys need to learn about the restrictions of HTML emails then. There are lots of resources out there. You basically have to unlearn everything and go back to 1999 website making; using tables for your layout, inline styles, etc. I don't like it either, but that's the way it is for now. –  Dec 22 '20 at 09:11
  • Exactly what @ChrisG said. Even if you manage to get the wanted result to one mail client (*Outlook/Thunderbird*), there are dozens of other clients, web-based or native applications, that you'd never know how your CSS based template will look like. Email rendering is never guranteed, so you better use images and tables for your layout. Better be safe than sorry. – Christos Lytras Dec 23 '20 at 14:43
  • 1
    Lots of useful tips and links here: https://css-tricks.com/tools-html-email-workflow/ –  Dec 23 '20 at 15:08
  • Yeah, You guys are right, I'll do it with image. thank you all for helping me with this. – SoliMoli Dec 24 '20 at 12:34
  • position absolute works in some mail clients but there are some inline css syntax restrictions. like if you miss the semi-colon ; at the end of property mail client will remove that styling. – Mujtaba Haroon Oct 15 '21 at 14:04

0 Answers0