Buenas, una vez realizada la optimización web para dispositivos móviles, de mi página web, me encuentro que cuando accedo desde mi teléfono y hago scroll no hay problema. Pero si desplazo hacia los lados la web o la estructura web se mueve y no se queda fijo.
Hago la comprobación desde un iphone 11, no se si el modelo o versión del móvil puede afectar. Es la primera vez que me pasa adaptando una web a móvil.
Estoy usando un template Kit de Envato elements y la configuración de las páginas están en elementor de ancho completo.
Si me podéis decir como solucionarlo por favor.
¡Muchas gracias!
Contenido solo visible a usuarios registrados
Hola Xavier,
Veo lo que comentas en mi móvil, pero es algo muy pequeño, verifica agregar esto en Apariencias > personalizar > CSS adicional:
body {
overflow-x: hidden !important;
}
Con esto no deberías tener scroll horizontal indiferentemente de cuál es el dispositivo y tamaños. De la misma forma veo que es elementor tu constructor, algunas veces tenemos espacios muy anchos en algunos elementos y no nos damos cuenta, solo te pasa con la homepage? si creas una nueva página en blanco es posible hacer scroll horizontal? Normalmente es un indicativo de lo que te comento, algo que está abarcando más espacio del necesario.
Un saludo 🖐️
@argenis Buenas Argenis, gracias por la rápida respuesta.
He probado de crear una página nueva con algún elemento y no me pasa lo del scroll horizontal, pero a la que importo el template kit me vuelve a aparecer lo del scroll horizontal.
El código que me comentas lo tengo que poner en la primera línea de CSS adicional?
Muchas gracias.
Hola Xavier,
Puedes agregarla al final del todo en el Apariencia > personalizar > css adicional.
Sin embargo, es bueno que verifiques la plantilla los elementos que estás agregando, si no te pasa en una página nueva quiere decir que tienes algo que está abarcando más allá del 100% de ancho.
Puedes aprovechar que tienes una plantilla y agregarlo a una página nueva e ir borrando secciones hasta dar con la sección que provoca esto, al identificarla es más fácil poder actuar basándonos en esa.
Un saludo 🖐️
@argenis Buenas Argenis, ¡muchas gracias por tus rápidas respuestas!
He podido ver que es el header el que hace que se pueda hacer scroll horizontal. Si al header le pongo el desbordamiento oculto el scroll horizontal desaparece ( https://digitalglobemarketing.es/diseno-web-tarragona/) pero en la versión web si quiero desplegar el menú de Servicios no puedo ver los servicios ya que parece que se vea por detrás del siguiente elemento.
Me podrías decir si es correcto aplicar lo del desbordamiento al header o que solcución aplicarías?
Muchas gracias!
Hola Xavier,
En elementor puedes modificar ciertos elementos según la resolución, has verificado si esto es un aspecto que puedes configurar en diferentes versiones? para hacerlo tienes que ver si tienen este icono:
Igualmente, si no lo logras modificar con esto, no te funciona el CSS que te compartí?, puedes modificarlo para que solo funcione en móviles:
@media screen and (max-width: 775px) {
body {
overflow-x: hidden !important;
}
}
Un saludo 🖐️
@argenis Buenas Argenis!
La verdad que copio el código que me enviaste en Apariencia -- Personalizar--- CSS Adicional y lo pongo al final del todo y sigo teniendo el mismo problema en la versión movil.
Te adjunto una imágen para que me puedas confirmar que es correcto o que puedo hacer para solucionar el problema.
Muchas gracias y perdón por insistir con el mismo problema!
Hola Xavier,
Antes nos comentases:
He podido ver que es el header el que hace que se pueda hacer scroll horizontal.
Mencionas el desbordamiento, tiene que ver, pero no precisamente del todo con el header, verifica ahora que sabes que es el header crear uno nuevo con esta opción activa, seguramente tienes algún elemento dentro de este header que la suma total de espacio abarca más del 100% de la página, trata eliminando elementos siempre teniendo un respaldo y verificando al momento de eliminar que es cuando se arregla.
Nos comentas que tal va esta prueba.
Un saludo 🖐️