Problema grave de visualización responsive en Divi 5 – Builder correcto pero página desplazada en iPhone

Hola Julio,

Hemos revisado las capturas y creemos que en este caso hay dos puntos que están provocando la diferencia. El primero está en la propia vista de Divi 5. En la captura vemos que has seleccionado el breakpoint de teléfono, pero el ancho del lienzo está configurado en:

484 px

En Divi 5, el icono de teléfono indica qué breakpoint estás editando, pero el ancho del lienzo se puede ajustar de forma independiente. Por tanto, no estás viendo exactamente el mismo ancho que probablemente tiene el iPhone desde el que estás realizando la prueba.

Como primera comprobación, estando en la vista de teléfono, cambia ese valor de 484 px por 390 px y revisa nuevamente la página. Puedes probar también con 375 px, 390 px y 430 px para comprobar cómo se comporta en distintos teléfonos.

Es muy probable que al reducir el lienzo a 390 px ya puedas reproducir dentro del propio Builder lo que estás viendo en el iPhone. El segundo punto que observamos es que hay bastantes medidas fijas en píxeles aplicadas específicamente al diseño móvil. Por ejemplo, en una de las capturas aparecen márgenes de:

• 55px a la izquierda
• 50px a la derecha
• 197px en la parte superior

Este tipo de valores puede funcionar a 484 px pero provocar que el contenido se salga cuando el viewport baja a unos 390 px. Para el bloque naranja revisaría especialmente:

Fila/Columna > Diseño > Tamaño

Y dejaría en el teléfono algo similar a:

• Ancho: 90% - 100%
• Ancho máximo: 100%

Evitando anchos fijos en píxeles. En Diseño > Separación, prueba eliminar los márgenes laterales fijos que se hayan utilizado para centrar manualmente el bloque. Es preferible centrar la fila mediante su propia alineación y utilizar un padding interno moderado, por ejemplo, 15–20 px.

Con los productos sucede algo parecido. En el Builder entran dos productos porque dispones de 484 px, pero en el iPhone esos dos elementos mantienen prácticamente el mismo tamaño y terminan desbordándose hacia la derecha.

Si estás utilizando el módulo Woo Products, selecciona el breakpoint Phone y revisa:

Contenido > Column Layout

Para probar, establece 1 columna en teléfono. Divi permite definir el número de columnas del módulo de productos y este tipo de ajuste conviene revisarlo específicamente en móvil.

https://help.elegantthemes.com/en/articles/12042132-the-woo-products-module-in-divi-5

Te comparto el enlace por si quieres darle un vistazo a su propia documentación sobre esto; luego, si quieres mantener dos productos por fila, entonces las tarjetas no deberían tener anchos o márgenes fijos; ambas tendrían que poder reducirse proporcionalmente dentro del espacio disponible.

En cuanto al funcionamiento responsive de Divi 5, no es necesario crear una versión completamente distinta de la página. El diseño de escritorio actúa como base y los otros breakpoints heredan esos valores mientras no se definan otros específicos. Cuando seleccionas Phone y modificas un ajuste, Divi guarda ese valor para ese breakpoint. 

https://help.elegantthemes.com/en/articles/13002269-responsive-editor-in-divi-5-visual-builder

Lo que sí hay que tener en cuenta es que Divi no puede adaptar automáticamente todas las composiciones realizadas con tamaños, márgenes o posiciones fijas. Es normal tener que ajustar para móvil elementos.

Vemos que otras páginas están bien creadas en cuanto a la versión móvil; quizás el problema está principalmente en que has modificado mucho los valores. Si dejas todo por defecto, ¿qué el propio Divi gestione los márgenes, como se ve? Puedes hacer esta prueba también si gustas.

Un saludo 🖐️