Customizing HTML in the Email Designer
Hey Adobe Community!
So I am running into an array of issues when it comes to customizing the HTML and CSS in the Email Designer. When I plug in the code into the HTML editor, the preview looks great. Once I send over a test, not only is some formatting lost (like border radius on a button) but basic inline styling put directly into the editor doesn't accompany the delivery.
I have tried the following CSS properties:
background-color
border-color
border-width
border-radius
columns
Am I missing a step? I have visited the documentation on this to no avail.
Thanks!
@ramon_bisswanger - I added several screenshots in an "answer" below to help separate all of the content. Thanks for you help on this matter!
EDIT TO QUESTION TO INCLUDE SCREENSHOTS:
This is a screenshot of the Email Designer Editor with all test assets configured. As you can see, besides the button copy residing within it's borders, all styling is displayed.
This is the screenshot of the preview mode. As you can see, besides the copy in the button, all is formatted.
This is the screenshot of the preview mode, where I wanted to test the mobile-only vs. desktop only functionality of the email designer. I took off the css for the mobile display so it would be one column. **When I sent the test and looked at in on my phone, the mobile-only functionality did work, I did not take a screenshot. However in a following screenshot, I will show how the desktop browser does not adhere to the mobile-only display**
Here is a screenshot of the Summary Page for the Delivery. As depicted, the the column CSS has been lost. Much of the other formatting is still in place and it appears that the desktop-only section is visible.
This is a screenshot of my test email as it appeared in Outlook. As you can see, my separator has lost width styling. The text box has lost the background color. The border radius is gone. The button does contain the text to my surprise, but the alpha value of the background color has been lost. The correct desktop-only copy seems to appear but it is not put in columns as styled.
This is a screenshot of my test email opened via browser (FYI - .mht files default to IE and there is no way I can change this unfortunately due to the configuration of my device). Here you can see that my border width is back to how it was styled. However, the text box background color is still gone. The border radius is gone. As for the button that was red with text contained in my outlook rendering, now its lost it's color and the text is not aligned. The desktop-only and mobile-only copy blocks both display, and the desktop-only version no longer has the columns CSS.
So due to the nature of these issues, I am not sure what to pinpoint as the source of the issues. Everything I did was handled in the Email Design Editor Styling Widgets, so there is no way I am inserting the code incorrectly. I've tried doing this using raw HTML components in the designer and get the same result. The issues aren't consistent across various renderings so I am at a loss while trying to figure this out.
Please let me know if you require any additional information to help answer this problem.
Related Conversations
