Good day, well I am using MJML framework to reach a template something like picture which is uploaded:
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:
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?
It's possible that the email client you are using to test your template is not rendering the styles correctly. Some email clients do not support advanced CSS properties like transform and translate, and may strip them out when rendering the email.
One way to work around this issue is to use tables and absolute positioning to achieve the same effect. You can try using mj-table and mj-position to create a layout similar to the one you have shown in your design.
Here is an example of how you might structure the code for your logo using tables and absolute positioning:
<mj-section><mj-column><mj-table><tr><td><mj-image src="logo.png" alt="Logo" /></td></tr></mj-table></mj-column></mj-section><mj-section><mj-column><mj-position position="absolute" top="-20px" left="0"><mj-text>Your text here</mj-text></mj-position></mj-column></mj-section>This will place the logo in a table cell, and use absolute positioning to position the text 20 pixels above the top of the email.
Keep in mind that this is just one way to achieve the layout you are looking for, and there may be other approaches that work better depending on your specific needs.