Issue #3064Opened October 6, 2020by terdinatore1 reactions

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)

boomshakarApril 20, 20221 reactions

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 Screenshot (150)

artfOctober 10, 20200 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.