WordPress no se ve bien en el móvil

Mi web WordPress no se ve en el móvil!

Si tu WordPress en el móvil se ve peor que tu cuñado en nochebuena puede ser por varios motivos. Te voy a explicar las diferentes posibilidades y las diferentes opciones para poder ajustarlo al móvil.

Por qué WordPress no se ve bien en el móvil

  1. Si anteriormente se veía bien es muy probable que sea uno de los siguientes casos:
    1. Que se haya roto con alguna actualización de un plugin, tema o del mismo WordPress
    2. Que haya entrado algún tipo de malware como un virus
    3. Que alguien o algo haya modificado tu web sin querer/queriendo

Si es probable que tu caso sea uno de estos haz click aquí. Sino, sigue leyendo

  1. Si se ve mal desde la creación de la web puede ser por varios motivos:
    1. Que no hayan creado una página responsive (adaptable a móviles)
    2. Que el código responsive no sea compatible con tu móvil
    3. Que el código responsive no sea compatible con tu navegador
    4. Que el responsive no se haya trabajado en todas las resoluciones, como en tu móvil
      Algo a tener en consideracion es si existe código personalizado en archivo functions.php de WordPress. Es posible que el error provenga de ahí (Aunque es una de muchas posibilidades)
  2. Si cuentas con un maquetador visual como Divi, Elementor, WP Bakery, etc. es probable que no esté funcionando correctamente en los dispositivos de ese tamaño

Cómo solucionar que WordPress no se vea bien en nuestro smart phone

Puedes seguir los consejos que se facilitan en este artículo. Pero hay situaciones singulares en las que, si no contamos con los conocimiento técnicos suficientes, necesitemos de ayuda externa, como contratar un diseñador web.

Cómo adaptar WordPress al móvil

Para saber cómo adaptar WordPress al móvil debemos entender primero qué es una web responsive.

Diseño responsive para móviles

¿Qué es una web responsive?

Una web responsive es, básicamente, una web que se puede adaptar de forma correcta a todo tipo de dispositivos, ya sean pantallas grandes, pequeñas, tablets, móviles, proyectores, etc.

Para lograr que una web sea responsive debemos tener en cuenta todas las proporciones y crear un código CSS para cada uno de estos tamaños. Pero no solo eso, hay código CSS que es compatible con algunos dispositivos o navegadores y con otros no.

Código CSS y media queries

Es muy importante que conozcamos las media queries para hacer una web responsive. os recomiendo que echéis un ojo este enlace.

¿Los temas de WordPress están adaptados para móvil?

Sí y no. Perdona por la confusión pero con esto, lo que quiero decir es que suelen estar configurados para cambiar la estructura según 3 medidas clave. Es decir, la estructura de la web cambiaría dependiendo del ancho de los dispositivos basándose en 3 medidas. Esto hace muy posible que existan dispositivos en los que no se vea bien la web.

Métodos para adaptar WordPress al móvil

Sabiendo qué es una web responsive debemos preguntarnos ahora cómo hacerla responsive

Existen varios métodos para poder adaptar WordPress al móvil. Voy a explicarte cada uno de ellos en un orden de calidad creciente.  Es decir, las que aparecen primero son las peores formas de ajustar WordPress al móvil, y también te voy a explicar por qué.

plugins para adaptar WordPress al móvil

1. Plugins para adaptar WordPress al móvil

Esta es la opción más sencilla y rápida, pero sin lugar a dudas la peor de todas. El hecho de usar un plugin para hacer tu web responsive abarca un gran número de problemas y desventajas que voy a enumerarte aquí:

  1. De forma automática es muy difícil que un plugin sea incapaz de reconocer todo el contenido de tu página, lo que llevaría a un mal resultado responsive
  2. Puede que aparezca bien en algunos dispositivos y mal en otros
  3. No vamos a tener control sobre el resultado final. Por lo que es probable que no nos guste cómo queda
  4. Los plugins crean incompatibilidades, agujeros de seguridad, ralentizan la web, etc
  5. Los plugins para adaptar WordPress al móvil están perdiendo fama y están dejando de actualizarlos

De todos modos y muy a mi pesar voy a dejarte un par de plugins por si te decides por esta opción:

WPtouch

Es el plugin más conocido para ajustar una página WordPress al móvil. Existe versión gratuita y de pago.

AMP para WP

Un plugin que proporciona la tecnología AMP para tu sitio en WordPress. Es totalmente gratuito, aunque si queremos mejoras tendremos que pagar por sus extensiones.

Maquetador visual responsive para móviles

2. Rehacer tu web con un maquetador visual y ajustarla a móviles

Los maquetadores visuales son plugins con una curva de aprendizaje casi nula y que te permiten crear una web arrastrando y soltando bloques. Un juego de niños. 

Esta es una opción a considerar, sí. Pero también hay que tener en cuenta el tiempo a invertir y la calidad del resultado. No quiero decir que se te dé mal el diseño o uso de maquetadores visuales, sino que más bien quiero dejar claro que el uso de maquetadores visuales tiene su lado negativo.

3. Encargar a unos profesionales que rehagan tu web y sea adaptable a móviles

Al contratar un profesional podrás tener seguridad de que se realice un trabajo bien hecho. Además, esta es la forma más sencilla, cómoda y segura. El único inconveniente es la inversión que supone. Pero antes de precipitarse asegúrate de que contratas a unos expertos en WordPress y, siendo el caso, no puedo evitar recomendarte nuestros servicios. Solo perderás 5 minutos en escribirnos y nos pondremos en contacto contigo.

Cómo adaptar WordPress al móvil si ha sido provocado por un malware o una actualización

Si tu WordPress ha dejado de estar adaptado a móviles desde hace unos días es muy probable que sea debido a algún malware o actualización de temas, WordPress o plugins. Aquí tienes algunos métodos para solucionar el problema en estos casos:

Restaura tu web a una versión anterior

Normalmente, los servidores de una calidad mediana suelen guardar una copia de nuestras webs por un periodo de tiempo. Si dispones de esta opción podría ser la solución más efectiva y rápida. Eso sí, a la hora de actualizar WordPress, plugins y temas hazlo 1 a 1 y revisa que esté todo bien después de cada actualización. Así quizá encuentres el causante del problema.

Hazle un escaneo de malware

Instala un plugin de escaneo de malware y revisa si tu web está infestada. Si crees que este puede ser tu caso te recomiendo leer este artículo
Si ninguna de las opciones anteriores te da una solución creo que lo mejor sería buscar a un profesional de WordPress como explico en este punto.

Imagen del autor

Álvaro Torres

Desarrollador web apasionado por WordPress, PHP, JavaScript, MysQL, jQuery, etc. Estoy creando webs desde el 2008...

Leer más y ver todos los artículos de este autor

27 comentarios en «WordPress no se ve bien en el móvil»

  1. Hola, en primer lugar felicidades por el contenido que nos brindas de una manera gratuita y útil.
    Tengo un problema con divi y woocommerce, cuando no estás logueado ,en la ficha de producto, no se ven las imágenes,están como con una capa blanca delante,la imagen está,pero no se visualiza,por una de esas casualidades te has encontrado con este problema?, y si es así ¿cómo lo has podido solucionar?, un saludo y perdona por la parrafada, hasta luego!!

    Responder
  2. hace dias que mi pagina en word press no se ve bien en algunos móviles ; se ve bien en PC en Notebook y en celualres en I phone y en algunos samsung y motorolas pero en otros no se ven las notas completas no se cargan las fotos etc

    Responder
    • Hola Cristian,

      En la página de inicio el problema que tienes es la posición del background en algunos elementos. Esto se pdoría solucionar mediante Elementor (que es el constructor que estás utilizando) o añadiendo un poco de código CSS. Si tienes problemas de visualización en tu móvil tendrías que añadir media queries, te animo a que eches un vistazo al enlace proporcionado en el artículo.
      Para solucionar, por ejemplo, el problema responsive de la cabecera de tu web WordPress podrías añadir el siguiente código:

      @media (max-width: 767px){
      .elementor-118 .elementor-element.elementor-element-0a4817a:not(.elementor-motion-effects-element-type-background) {
      background-position: 0 0 !important;
      }
      }

      Y para solucionar el slider que no se ve bien en móviles:

      @media (max-width: 767px){
      .elementor-118 .elementor-element.elementor-element-f213519 {
      width: 100% !important;
      max-width: unset;
      --container-widget-width: 100%;
      }
      }

      Espero haberte ayudado, y si tienes cualquier otra duda estaré por aquí
      🙂

      Responder
  3. Buenas Tardes 🙂
    Estoy creando mi website donde tengo 5 paginas una de ellas es la de contact que se ve en el ordenador pero no se ve desde el celular.
    Agradezco muchisimo la ayuda.
    Hanae

    Responder
    • Hola Anae,

      Creo que refieres al botón de tu página de contacto que tienes en el header. Ese botón desaparece porque estás usando el builder de astra que tiene 2 menús diferenciados, uno m¡para desktop y otro para mobile.

      Espero haberte ayudado
      🙂

      Responder
  4. Hola como estás? tengo un problema con la vista de las imagenes en la version movil pero solo en iphone. Te explico, es la segunda vez que me pasa y he hecho un monton de paginas con elementor pro. Las version de escritorio de la web se ve bien, adapto a la version movil y en los andorid se ve perfecto todo, pero en los iphone las imagenes se ven super mal, como si fueran gigantes y la verdad es que las dimensiones de las imagenes cargadas son las adecuadas. Ya actualice elementor a su version mas reciente, no se por que esta pasando, antes no me habia pasado. Sabras por que?

    Responder
    • Hola Caren,

      Lo que comentas ocurre porque estás usando varios efectos parallax. Para realizar estos efectos se usa la declaración CSS background-attachment: fixed. Esto, usa la medida de document en IOS, por eso se ven tan desproporcionadas. Una solución sería establecer todos los efectos parallax como scroll para dispositivos menores a 767px, la medida establecida por Elementor:

      @media screen and (max-width: 767px){
      .back {
      background-attachment: scroll !important;
      }
      }

      Para añadir ese código podrás hacerlo desde Apariencia/Personalizar/CSS adicional. Hay veces en las que debes limpiar caché para que estos cambios se reflejen.

      Si te ha sido de ayuda te agradecería nos hagas feedback
      🙂

      Responder
          • Si no me explique, no quedan con el efecto fondo fijo, sabes el mismo efecto para escritorio de fondo fijo lo aplicaba a movil usando este codigo: @media screen and (max-width: 767px) {
            .back{
            background-attachment: fixed;
            }
            }

            y siempre me andaba bien, en android todo quedaba perfecto, hasta donde se no habia tenido problema con iphone haciendo eso. Pero esta 2 ultimas paginas que he hecho ocurre que a las fotos en iphone se distorcionan al extremo, cosa que no me ocurria antes. Ahora resulta que cuando veo la pagina en la version movil en iphone se ve mas las fotos y si aplico el codigo que me has dejado anteriormente, entonces pierdo todo efecto de fondo fijo tanto en iphone como en adroid (aunque las fotos se ven bien en iphone si lo hago)…..Asi que quede fuera de base con ese problema porque despues de tiempo haciendo eso siempre en este mes con esta nueva pagina me ocurrio eso….
            Gracias por tu atencion!

  5. hola!! hace unos dias hice unos cambios en mi pag y en la computadora se ven tal cual los hice, pero cuando quiero ver la version movil en mi celular, no respeta los cambios que le hice!!

    Responder
  6. Hola! muy buen artículo, mi problema es que el formulario de suscripción a Newsletter se ve bien en PC y en tablets, pero no aparece directamente en ningún celular o móvil. Que puede ser ?

    Responder
  7. Hola!! Estoy teniendo inconvenientes al abrir mi pagina desde distintos celulares. En divi deje todo bien configurada mi pagina en la version movil. Pero al abrir dsd el cel se ve desconfigurado a veces si a veces no, dsd samsung se ve de una forma de iphone otra. Por ej: los bordes de algunos txt no salen, algunas imagenes tampoco, y llega hasta un punto y se corta la página y no puedo seguir bajandola. Tb tenia problema con unos margenes en un modulo q ponia tood bien pero no tomaba o no se, eso termine eliminando. Ya borre y purgue cache con wp rocket. Ya hice config con mi hosting. Ya probe el modo seguro de divi. Ya elimine cache de mi cel. Pues ya no se que mas hacer porque los problemas persisten. Agradecería muchisimo su ayuda!!!!!!

    Responder
      • mi pagina llega hasta un punto y no permite seguir bajando, se corta. Algunos textos salen sin los bordes de recuadro, y hay un modulo que recien lo hice de nuevo de cero y sigue con el mismo problema, sale todo encimado los textos..al raato recien carga y se ve bien pero ni bien se abre se ve todo mal. Y dps hay imagenes en unas secciones que ni me salen siquieran… No se como explciarle no me deja adjuntarle la foto

        Responder
  8. Hola he instalado y he empezado a configurar el seo Yoast premium y ahora no se ve bien mi web en los móviles, sale la pantalla en blanco y muy pequeña , aunque si se ve en el ordenador. Antes se veía perfectamente en ambos sitios.

    Responder
  9. Holaaaa ayuda, tengo una página hecha con elementor y se vizualiza bien en el ordenador, pero a la hora de cargarla en el celular se ve sin el diseño hecho con elementor, se ven todos los elementos disgregados… y no encuentro como solucionarlo… por favor ayuuuuda…. esta es la web https://www.kjcnutra.com/

    Responder

Si tienes alguna pregunta, sugerencia o simplemente quieres dar tu opinión no lo dudes y deja tu comentario