Vista móvil con iconos y botones desperdigados.

Hola Silvia, 

Veo que tienes muchos espacios añadidos en las columnas en Divi, revisa como estas maquetando cada una de las sección para movil, te en cuenta que en Divi puedes seleccionar que espacio aplicar en que dispositivo → https://www.elegantthemes.com/blog/divi-resources/how-to-optimize-your-divi-layout-for-mobile-devices

Si no logras verlo una alternativa es probar con CSS; por ejemplo:

@media (max-width: 768px) {
.et_pb_column.et_pb_column_1_5.et_pb_column_2.et_pb_css_mix_blend_mode_passthrough {
width: 48% !important;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_1.et_pb_css_mix_blend_mode_passthrough {
width: 48% !important;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_3.et_pb_css_mix_blend_mode_passthrough {
width: 48% !important;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_4.et_pb_css_mix_blend_mode_passthrough {
width: 48% !important;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_5.et_pb_css_mix_blend_mode_passthrough.et-last-child {
width: 48% !important;
}
.et_pb_row .et_pb_column.et_pb_column_1_5 {
margin: 0 0 10px;
}
.et_pb_button_0_wrapper {
margin-left: 0px !important;
}
ul.et_pb_social_media_follow_0 {
padding-top: 0px !important;
padding-left: 0px !important;
}
ul.et_pb_social_media_follow_1 {
padding-top: 0px !important;
padding-right: 0px !important;
}
}

Si embargo ten en cuenta que lo idea es que ajustes todo en el mismo constructors. 

Un Saludo 

Buenas noches Karen: 

Sí, efectivamente, he usado demasiado el espaciado para poder colocar algunos elementos donde quería. He descubierto lo que me comentas de las vistas y lo he probado y la he liado... Había creado un nuevo artículo que ya tenía finalizado, al ir a visualizarlo en el móvil, lo de siempre, al utilizar fila con imagen y textos, lo ponía descolocado y lo puse correcto en vista de móvil y tablet... pero al guardar, me lo cambió todo en vista de pc... finalmente, cuando fui a salir de ese modo... me eliminó todo el artículo y estoy que me tiro de los pelos... 

Hay alguna forma de que al guardar una distribución en visualización ordenador, y luego modificar vista móvil, no te cambie la otra? Muchas gracias... 

Hola Silvia, 

En divi cuando estas editando dentro del mismo elemento te permite seleccionar la vista y modificar el espacio justo para este dispositivo, por ejemplo como te muestro en el siguienge video

Puedes revisarlo y verificar si con ello logras ajustar los espacios de form correcta. 

Un Saludo

Así lo hice ayer, y lo acabo de hacer de nuevo. El problema, como te decía, es que una vez modifico como quiero en la vista del móvil y coloco todos los textos correctamente, cuando vuelvo a la vista pc pasa esto... 

Y lo que se tenía que ver era esta disposición que es la que yo puse en vista pc: 

Hola Silvia, 

En que URL podemos ver esta vista? si ingreso a tu sitio web esto es lo que vemos

Indicanos como podemos revisar esta parte que nos comentas. 

Un Saludo

Buenas noches, Karen: 

En este caso es en el último artículo. He tenido que quitar las columnas al final, porque si lo modifico en vista de móvil, me lo descompagina en vista pc y si lo hago a la inversa, pues me cambia el orden en vista móvil. Me sucede lo mismo con los iconos de la página principal del blog, que si los arreglo en vista móvil, me los desfasa en vista PC. 

https://www.tubichonmaltes.es/limpiar-oidos-bichon-maltes/

HOla Silvia, 

Aunte en este momento no veo el sitio de forma incorrecta, no logro identificar lo que deseas arreglar. Envianos capturas especificando que deseas modificar para poder revisarlo

Un Saludo 

Hola Karen: 

Os puse capturas de pantalla del ejemplo más arriba. Os mostré cómo tenía configurada la página desde pc y cómo me la desconfiguraba si tocaba la vista móvil. Si te fijas en esas capturas, me desconfigura las columnas. 

He creado tres páginas de simulación a ver si lo entendéis mejor así. 

Yo tenía creada esa entrada con esta visualización: https://www.tubichonmaltes.es/copia-de-limpieza-de-oidos

Sin embargo, si accedías desde el móvil, te lo muestra así, con las columnas descolocadas (los pasos van en orden del 1 al 4 y me los cambiada sin sentido primero el 2, luego el 4,luego el 1 y por último el paso3 ): 

Si arreglaba el orden en la vista de móvil, me hacía esto en al vista pc: 

Ahora no ves fallo porque he tenido que modificar la organización del artículo y eliminar las columnas puesto que si lo dejo bien en vista de móvil, me lo desorganiza en vista pc, y viceversa... por eso ahora lo vez todo en una sola columna: https://www.tubichonmaltes.es/limpiar-oidos-bichon-maltes/

Pero me sucede lo mismo en cualquier otra página o entrada, por ejemplo, en la página principal tengo colocados los botones en fila, y entiendo que en versión móvil los coloca por columna por tema de espacio, pero si los intento alinear me pasa esto: 

Vista pc: 

Vista móvil: 

Cuando ordeno un poco la vista de móvil y me queda así: 

Entonces, automáticamente me desbarajusta toda la vista pc que ya tenía configurada y me hace cosas como ésta: 

Espero que ahora podáis entenderme mejor, porque si arreglo de un lado me fastidia el otro, no sé si hay forma o alguna opción activada que no me permite personalizar ambas vistas a la vez y estoy aburrida ya de darle vueltas sin resultado. 

Muchas gracias por vuestra paciencia. 

La última captura de pantalla no me la guardó. Os la facilito aquí. 

Hola Silvia, 

Entiendo entonces que lo que no se ajusta en este momento son todos los botones que tienes en la parte superior pero solo en la vista movil, ya que en la vista de escritorio lo veo de la siguiente forma

Debes tener en cuenta que cuando se manupulan tanto los espacios deberas ir probando hasta que se ajuste todo como necesitas, ahora puedes revisar si el siguiente codigo CSS te ajusta lo que necesitas en movil y no mueve mas nada en otras paginas o escritorio:

@media (max-width: 768px) {
.et_pb_row .et_pb_column.et_pb_column_1_4, .et_pb_row .et_pb_column.et_pb_column_1_5, .et_pb_row .et_pb_column.et_pb_column_1_6 {
margin: 0 0 10px;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_2.et_pb_css_mix_blend_mode_passthrough {
width: 48% !important;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_1.et_pb_css_mix_blend_mode_passthrough {
width: 48% !important;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_3.et_pb_css_mix_blend_mode_passthrough {
width: 49% !important;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_4.et_pb_css_mix_blend_mode_passthrough {
width: 49% !important;
}
.et_pb_column.et_pb_column_1_5.et_pb_column_5.et_pb_css_mix_blend_mode_passthrough.et-last-child {
width: 49% !important;
}
.et_pb_row_5col {
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
align-items: stretch;
}
.et_pb_module.et_pb_text.et_pb_text_0.et_pb_text_align_left.et_pb_bg_layout_light {
margin-top: 180px !important;
margin-left: 0px !important;
}
.et_pb_button_module_wrapper.et_pb_button_0_wrapper.et_pb_module {
margin-left: 0px !important;
}
.et_pb_section_0 {
min-height: 350px;
}
}

Revisalo y nos comentas como va todo

Un Saludo

HOla Karen: 

No me llegó aviso de tu respuesta al email como otras veces y no te había leído. Bueno, sólo visualizas el problema de los botones porque tuve que desechar la idea de usar columnas, pero el problema está ahí si quiero usar columnas, puse capturas de pantalla en el anterior post sobre el problema que hay. 

He colocado el código que me dices, pero bueno, sigue estando descolocado y si quiero centrar los iconos o textos, una vez que lo mueves en vista móvil, lo desordenas en vista pc. Por ejemplo, ahora las últimas entradas en vista móvil me las muestra así, cuando tendría que salir la foto en cada columna perteneciente a su entrada, y sinceramente, queda horroroso de cara a que entren clientes a verlo. 

Hola Silvia, 

En movil las imagenes no pueden quedar una al lado de la otra, en este casi lo que posibleente veo este afectando sea el tamaño o como se añade el flex a las columnas, si es asi prueba añadir el siguiente codigo CSS en Divi → Opciones del tema → General → CSS personalizado, abajo del todo

@media (max-width: 780px) {

body #main-content .et_pb_blog_0 .et_pb_ajax_pagination_container,
body #main-content .et_pb_blog_0 .et_pb_blog_grid_wrapper{
display: block !important;
}

body #main-content .et_pb_blog_0 article.et_pb_post{
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
float: none !important;
clear: both !important;
display: block !important;
}

body #main-content .et_pb_blog_0 article.et_pb_post:nth-child(2n){
margin-right: 0 !important;
}
.et_pb_module.et_pb_blog_0.et_pb_posts.et_pb_bg_layout_light {
display: flex;
flex-wrap: wrap;
}

Verifica esto no afecte ninguna otra sección del sitio web

Un Saludo

El código me da un error en la línea 30, columna 2 

Hola Silvia, 

Falto un cerrar el codigo al final, prueba nuevamente:

@media (max-width: 780px) {

body #main-content .et_pb_blog_0 .et_pb_ajax_pagination_container,
body #main-content .et_pb_blog_0 .et_pb_blog_grid_wrapper{
display: block !important;
}

body #main-content .et_pb_blog_0 article.et_pb_post{
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
float: none !important;
clear: both !important;
display: block !important;
}

body #main-content .et_pb_blog_0 article.et_pb_post:nth-child(2n){
margin-right: 0 !important;
}
.et_pb_module.et_pb_blog_0.et_pb_posts.et_pb_bg_layout_light {
display: flex;
flex-wrap: wrap;
}

}

Un Saludo