I have made emails campaigns and it includes Images, text and also html code box, and I have also made sure to place white backgrounds for content in the row setting but whenever I send the Test Emails, there is no white background showing and in dark mode it just stays the same but it works in Light mode. This is the case for outlook and when test email is sent to Gmail it just completely breaks and sometimes doesn't even show up.
So my question is how can this be fixed and why aren’t backgrounds sowing up and what is the best practice to avoid these problems
Thank You.
Solved
Emails appear different in preview than what the receiver gets.
Best answer by Mau
This issue arises because email clients like Gmail and Outlook handle HTML and CSS differently, especially when it comes to dark mode.
That said, we recommend checking out our blog post on the topic, and you can also read more about the current state of dark mode for email here to learn more about how to design and code messages for a more consistent user experience.
These steps are outlined in the above article to improve the dark mode experience for subscribers, along with other code-specific steps:
- Optimize logos and other images for all styles by adding a translucent outline to transparent PNGs with dark text
- If you use our code editor rather than the drag-and-drop editor, you could enable dark mode in email client user agents by including this metadata in the
<head>tag of the layout<metaname="color-scheme"content="light dark"><metaname="supported-color-schemes"content="light dark"
I hope that helps!
This issue arises because email clients like Gmail and Outlook handle HTML and CSS differently, especially when it comes to dark mode.
That said, we recommend checking out our blog post on the topic, and you can also read more about the current state of dark mode for email here to learn more about how to design and code messages for a more consistent user experience.
These steps are outlined in the above article to improve the dark mode experience for subscribers, along with other code-specific steps:
- Optimize logos and other images for all styles by adding a translucent outline to transparent PNGs with dark text
- If you use our code editor rather than the drag-and-drop editor, you could enable dark mode in email client user agents by including this metadata in the
<head>tag of the layout<metaname="color-scheme"content="light dark"><metaname="supported-color-schemes"content="light dark"
I hope that helps!
Reply
Most helpful members this week
Login to the community
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.