Issues with email format and contents in mobile view (web-app)

[shahiakriti]

When viewing the template on mobile view (outlook app and web-app), the contents of the template are inconsistent.

Steps to reproduce:

• Open the email editor
• Drag a text to the editor
  • edit the text to "We’re giving you."
  • set the font size to 28px and align center
  • set font weight 700
• Drag a button underneath the text
  • set padding 15px 55px 5px 55px
  • set the text to "on your next purchase within 14 days*"
  • set the font size to 24px and align center
  • set font weight 700
• Drag a text again under the button
  • set padding 5px 55px 25px 55px
  • set the text to "Shop at your local Discount Drug Store today"
  • set the font size to 20px and align center
  • set font weight 700

Observation: If we send this template in the email, the elements are not consistent in mobile view web-app and outlook app. Below if the screenshot of how it appears in the outlook mobile web-app (Here I'm using Safari). Here we can see the text is not wrapped correctly and button is also missing.

Expectation: The email is supposed to look like the screenshot below taken from the outlook app on mobile phone.

[m-Ryan]

Please check if the button link is valid, as some platforms may remove the button if the link is invalid. @shahiakriti

[shahiakriti]

Thanks @m-Ryan, for the button we figured that the default # that gets added to the Href when we drag a button was causing the button to disappear in some platforms.

However there's still an issue with text wrapping it seems. The texts are breaking when we send test emails. Please view the screenshot below:

[m-Ryan]

https://www.caniemail.com/search/?s=word-break

The default style of MJML is word-break: break-word, you can override it. https://developer.mozilla.org/en-US/docs/Web/CSS/word-break But I don't have a better way to recommend. @shahiakriti

Relatived: https://github.com/mjmlio/mjml/issues/1728 https://github.com/mjmlio/mjml/issues/2615 https://github.com/mjmlio/mjml/issues?q=word-break