Customer experience | Sales, Customer Insights,...

Text Alignment keeps going centered

(0) Share

Report

Posted on by alemieux69

In my MS Dynamics email templates, I noticed that anything that comes after the last style block in the main css in the header, the text will all be centered in the email. Here's that style block:

[data-layout="true"] {

margin: 0 auto;

max-width: /* @layout-max-width */

640px/* @layout-max-width */

;

}

To avoid that, I've had to make other style sheets or put styles before that block. Is anyone else experiencing the same?

Sometimes, we're also seeing the text get centered even with our precautions.

I have the same question (0)

All responses (5)

Answers (0)

alemieux69 2 on at

Like (0)

Report

In further investigation, it looks like Dynamics is favoring <th> instead of <td> in tables. That could be the issue too.

Was this reply helpful? Yes No
Daniel Norris 43 on at

Like (0)

Report

Yes margin:0 auto; centers. Have you tried going to the text element and adding text-align:left; or float:left or something similar?

Was this reply helpful? Yes No
alemieux69 2 on at

Like (0)

Report

Yes, we've had to resort to that. But what is the purpose of the [data-layout] style and why is it centering text?

Was this reply helpful? Yes No
Daniel Norris 43 on at

Like (0)

Report

Without looking too deeply, I believe its a way of structuring the template and enabling drop and drag functionality. Sometimes this can cause interference with goals.

Was this reply helpful? Yes No
Suggested answer

Jelena Rajkovic on at

Like (1)

Report

Hello.

The style you mentioned is used to center the email.

The width is set using general styles and it's meant to be centered when received. This is by design and just set the style on element with attribute data-layout="true".

But, this shouldn't break anything and the text should be left aligned by default:

This is because we add styles that are not visible in HTML tab, but they are in the final email.

The first div element in the body has attribute data-layout-version="v2" :

<div data-layout="true" data-layout-version="v2" style="margin: auto; max-width: 600px;">

And we have style for text that's added for text alignment:

        th.columnContainer,

        th.inner {

            font-weight: 400;

            text-align: left

        }
This style is visible in Preview tab, you can inspect and see the final HTML that has all the processing there.

This is used so any style update or any fixes needed can be added without editing email from HTML tab.

Regarding table elements, there were issues with some mobile email clients when using td elements, so that's why we use th elements instead. It shouldn't create any issues.

I'm not able to reproduce this issue, so if you could share and example code, I can try to see what's the issue and provide more information regarding this.
Did you maybe remove this attribute? Or maybe started with custom code? If you have repro steps for this issue, that would be helpful.

Thank you,
Jelena

Was this reply helpful? Yes No