El boletín hecho con GrapesJS no se renderiza bien en móvil
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)
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)
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.
Issue #3579
RTE se pierde al abrirse justo después de soltar el componente 'activeOnRender'
Versión: 0.17.4 ¿Puedes reproducir el error de la demo?[x] Sí[ ] No Pasos para reproducir:Ir a la demoColocar un bloque de "Texto" dentro d...
Issue #3731
El elemento de texto no puede seleccionarse dos veces después de extenderse con eventos
Versión: 0.17.25 ¿Puedes reproducir el error de la demo?[ ] Sí[x] No ¿Cuál es el comportamiento esperado? Actualiza un componente existente...
Issue #3166
Problema con copiar y pegar un nodo
*Versión:0.16.27 ¿Puedes reproducir el error de la demo? [ ] Sí [ ] No ¿Cuál es el comportamiento esperado? En el panel y lienzo derechos,...
Issue #5583
No se puede configurar en fondo:none en la versión móvil usando el panel de estilos
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Última versión de Edge Enlace de demo rep...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.