BUG: Newsletter made with GrapesJS does not render nicely on Mobile
Question
Version: v0.16.22
Are you able to reproduce the bug from the demo? [X] Yes (Newsletter Demo)
How to reproduce Export the default template or your own template (after you imported it) and send it using . Open the mail on an iPhone.
What is the expected behavior? When sent to a mobile device (in my case iOS) the email should use the full width of the display
Describe the bug detailed
I use Mailtrain to send newsletters. Mailtrain integrates GrapesJS to help visualize and edit the emails before sending them. I usually import a template that is known to work fine on mobile and let someone that unfamiliar with HTML adjust the content of the newsletter.
When opening a sent newsletter on a mobile device a substantial amount of space is lost since the email does not take up the whole screen width. My best guess is that this has something do to with the protectedCss styles that are applied by default to the HTML code e.g. box-sizing: border-box; and other changes that happen behind the scenes.
I opened an issue on the Mailtrain Repo too Issue. There I explained less briefly what the problem is.
What is the current behavior? Email sent to mobile device have large white bars on each side.
Answers (2)
The workaround to this issue is setting the body to 100% width & height, then the email container itself should have a max-width of 550px and width of 100%, then height: auto and min-height: 100vh or 150px

Hi @terdinatore the core of GrapesJS is about creating the editor for building stuff with HTML/CSS/JS, but building the right email blocks/components is up to who integrates the editor
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5937
image send to mail
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chromeReproducible demo link https://grapesj...
Issue #3125
BUG: linear-gradient CSS does weird things to background-image
Version: 0.16.27 Are you able to reproduce the bug from the demo? [x] Yes [ ] No What is the expected behavior? When adding background-imag...
Issue #3454
BUG: RTE insert link does not update DOM
Version: "0.17.3" Are you able to reproduce the bug from the demo?[X] Yes[ ] No What is the expected behavior? After inserting link using d...
Issue #5583
BUG: Can't set background:none in mobile version using styles panel
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Edge last version Reproducible demo link h...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.