Issue #3064💬 RespondidoAbierto el 6 de octubre de 2020por terdinatoreReacciones 1

El boletín hecho con GrapesJS no se renderiza bien en móvil

Respuesta rápidapor boomshakar1

La solución a este problema es poner el cuerpo al 100% de ancho y altura, luego el contenedor de correo debería tener un ancho máximo de 550px y un ancho del 100%, y después altura: auto y min-height: 100vh o 150px ! Captura de pantalla (150)

Lee la respuesta completa abajo ↓

Pregunta

Versión: v0.16.22

¿Puedes reproducir el error de la demo? [X] Sí (Demo del boletín)

Cómo reproducir Exporta la plantilla predeterminada o la tuya propia (después de importarla) y envíala usando . Abre el correo en un iPhone.

¿Cuál es el comportamiento esperado? Cuando se envía a un dispositivo móvil (en mi caso iOS), el correo debería usar todo el ancho de la pantalla

Describe el error detallado Uso Mailtrain para enviar boletines. Mailtrain integra GrapesJS para ayudar a visualizar y editar los correos antes de enviarlos. Normalmente importo una plantilla que se sabe que funciona bien en móvil y dejo que alguien que no esté familiarizado con HTML ajuste el contenido del boletín. Al abrir un boletín enviado en un dispositivo móvil se pierde una cantidad considerable de espacio porque el correo no ocupa todo el ancho de pantalla. Mi mejor suposición es que esto tiene que ver con los estilos 'protectedCss' que se aplican por defecto al código HTML, por ejemplo 'box-sizing: border-box'; y otros cambios que ocurren entre bastidores.

También abrí un problema en el repositorio de Mailtrain Issue. Allí expliqué de forma menos breve cuál es el problema.

¿Cuál es el comportamiento actual? Los correos enviados a dispositivos móviles tienen grandes barras blancas a cada lado.

Respuestas (2)

boomshakar20 de abril de 2022

La solución a este problema es poner el cuerpo al 100% de ancho y altura, luego el contenedor de correo debería tener un ancho máximo de 550px y un ancho del 100%, y después altura: auto y min-height: 100vh o 150px ! Captura de pantalla (150)

artf10 de octubre de 2020

Hola @terdinatore el núcleo de GrapesJS consiste en crear el editor para crear cosas con HTML/CSS/JS, pero construir los bloques/componentes adecuados depende de quién integre el editor

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.