79
Views
14
Comments
Solved
Outlook Email - CSS Margins not working
Application Type
Traditional Web
Service Studio Version
11.53.38 (Build 61903)
Platform Version
11.19.0 (Build 38072)

Hello Community,

I've been trying to add margins to an email this entire day and I wasn't successful. So far I've tried using containers as spacers (so it would be centered in the email), margins and paddings, but unfortunately none worked. I was told that I could try to use in-line CSS, but honestly I don't know how to do that or that doesn't work either. (I've tried using the style = If(..., "class1", "class2"))

Now I'm asking for your help since I've ran out of ideas.
My goal with this is to margin left and right so the table displayed in the email is correctly centered and spaced out from the edges. I already know that not all the CSS syntaxes work, but I expected the margins to. (It says it's buggy but it works)

Thank you in advance,
JL

2021-11-23 12-30-54
João Lélis
Solution

It's working now, I was using blocks and the blocks were moving right for no apparent reason, I had to remove the blocks and do the email in the email page and it accepted the margin... it's strange but well, it's working and that's what matters to me :) Thank you everyone that tried to help, this post didn't really have an answer so yeah.

2023-08-28 07-00-10
Paulo Torres
Champion

Great news :)

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

It might've been the way CSS was handled in the blocks. Great you got it solved though!

2023-08-28 07-00-10
Paulo Torres
Champion

Hello,

Emails are not easy to build because the Outlook. Outlook doesn't respect anything, ahahah.

Mostly you should do as a CSS inline, is not good but in emails is the only way.

And the IF will doesn't work as Outlook is not a browser.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

First, the Platform will already put CSS inline if needed. But Outlook is bad indeed.

You're wrong on the If though: emails are processed server-side and as such ifs are handled when the email is generated.

2021-11-23 12-30-54
João Lélis

Do you know any way I could do this? I've tried using Tables and setting the content that I need inside its cells and it works, but the margin sends the email a lot to the right and it basically disappears from your screen.

2023-08-28 07-00-10
Paulo Torres
Champion

Also if you want a dynamic IF like IsPhone, for example?

2023-08-28 07-00-10
Paulo Torres
Champion
2021-11-23 12-30-54
João Lélis

Unfortunately I can't share the oml since it it's not mine (company), but I can give you any information that you think it's needed.

2023-08-28 07-00-10
Paulo Torres
Champion

You can prepare something similar, without information. Just need to see the structure of your email

2021-11-23 12-30-54
João Lélis

Alright, I'm going to do that in my personal ASAP and send it here.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

No, there's absolutely no way to reliably detect in an e-mail where it's being shown and adjust CSS accordingly. But that's not an "if", that's a media selector in CSS (which 99% of the times won't work in an e-mail). For an actual "if", you'd need JavaScript, and JavaScript for sure isn't executed in an e-mail (it would be a huge security concern if it were).

2021-11-23 12-30-54
João Lélis
Solution

It's working now, I was using blocks and the blocks were moving right for no apparent reason, I had to remove the blocks and do the email in the email page and it accepted the margin... it's strange but well, it's working and that's what matters to me :) Thank you everyone that tried to help, this post didn't really have an answer so yeah.

2023-08-28 07-00-10
Paulo Torres
Champion

Great news :)

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

It might've been the way CSS was handled in the blocks. Great you got it solved though!

2024-08-06 11-20-33
Ronnie Verheij

I also had some troubles, However have a working example now. 

Not sure if you are able to see the dropbox link 


https://www.dropbox.com/scl/fi/ttgwn5whvgl0pgkj4ieek/zzzShinkansenMailExample.oap?rlkey=5jrr6ascclhi7dy1zv5kpiob3&st=fu8ljblb&dl=0


It contains a

n DEMO app for creating better Outlook emails using reactive OS11

2024-08-06 11-20-33
Ronnie Verheij

You might want to checkout the following demo in the Forge

Mail will look like this:

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.