Styling problems with order confirmation email

Questions
1

Hi how is the new way of styling email templates supposed to work? I can’t manage it to work in different mailapplications and also having problem with media queries.

  • I have added classes and styling to scss file, and when I run ‘yarn run prod’ it bundels the css to inline style. The template for order confirmation email looks good in the browser when I add ‘&isEmail=true’ in the url, it also looks good when I test it in Papercut. But in other mailapplications the style is not added correctly and it looks weird. For exaple Outlook.
    What is the best way for working with emailtemplate so it looks good in different mailapplications?

  • Also having problems with media queries. If I only using one media querie the correct styling gets added to the element. But If Im using two media queries (one for small and one for large screens) on a element, Only styling for one mediaquery gets added. E.g if the media query for small screen is the latest added styling , it is the only one that’s working, that styling is even added on large screens.
    Is there a workaound for this bug?

2

What .scss file did you add styles? Is it Litium.Accelerator.Email\src\assets\scss\template\order-confirmation.scss?

3

yes I added it to that file

4

Is the default Accelerator’s style broken as well? What version are you using?

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.