Video en WordPress no se adapta a versión móvil

Antoniio1 · 12 Sep 2019

Hola, buenas. Tengo una página en WordPress y en ella hay un video que se muestra sin problemas en la versión web, al momento de abrir la página con el celular el video no se muestra y queda un espacio en blanco muy grande. Cómo hago para que se adapte al celular?
Esta es: https://jerseys.arrieta.mx/

El video si lo ven en la computadora sin problemas aparece, pero entrando al cel ya no se muestra.

Saludos.

YeltsinReyes · 12 Sep 2019

El vídeo esta en un div que tiene esta clase .elementor-hidden-phone,
lo cual oculta el vídeo cuando es una pantalla de móvil con display: none;

raul777 · 12 Sep 2019

Veo que estas usando Elementor, el problema es que el div en cuestion lo tienes oculto para telefonos moviles, lo siguiente es colocar el width con valor del 100% y debes ponerle un margin-top que permita desplazarlo un poco mas abajo porque queda oculto por el header con fondo cafe

Antoniio1 · 12 Sep 2019

.elementor-hidden-phone {
width: 100%
}

Coloco ese css en el css de WordPress pero sigue sin verse en móvil, es correcto colocarlo así?

raul777 · 12 Sep 2019

Tienes que cambiar el display tambien y mover el margin-top

Antoniio1 · 12 Sep 2019

raul777 dijo:
Tienes que cambiar el display tambien y mover el margin-top

Por lo que veo el display puede ser solo block, inline y none que es el que actualmente está.
Soy malo con eso del css pero cada que actualizo e inspecciono elemento y lo pongo en modo móvil, sigue apareciendo la línea como al principio y no me aparece lo que modifiqué:

Insertar CODE, HTML o PHP:

.elementor-hidden-phone {
width: 100%;
margin-top: 25px;
display: block;
}

raul777 · 12 Sep 2019

Si ves que no se modifica prueba ponerle !important

display: block !important;

Antoniio1 · 12 Sep 2019

De hecho, ya lo puse, mira:

Pero cuando le doy inspeccionar:

raul777 · 12 Sep 2019

Asi debe quedar

Antoniio1 · 12 Sep 2019

Lo sé, ya lo modifiqué pero no se generan cambios. De hecho lo modifiqué desde ftp y sigue igual

seba767 · 12 Sep 2019

Pues acabo de ver y si me aparece desde el celular 🙄

Antoniio1 · 12 Sep 2019

seba767 dijo:
Pues acabo de ver y si me aparece desde el celular 🙄

Lo tendrás como "ver versión web" ? porque si entras así normal no se ve, lo he probado con 4 celulares distintos.

raul777 · 12 Sep 2019

Antoniio1 dijo:
Lo tendrás como "ver versión web" ? porque si entras así normal no se ve, lo he probado con 4 celulares distintos.

Yo lo he modificado desde inspeccionar elemento, emulando un movil y se mira te he mandado la captura de pantalla. Si aun no logras hacerlo mandame un MP para entrar a la web yo y verlo a detalle

Antoniio1 · 13 Sep 2019

Hola, ya solucioné ese problema. Borré la caché y puedo verlo en el celular. El único problema ahora es que en mi celular, me aparecen elementos que oculté:

Y así se mira mi cel:

Pero, cuando inspecciono desde web, no se miran, ya está rara la cosa :c

raul777 · 13 Sep 2019

Esos elementos estan dentro del mismo div en Elementor, lo ideal seria crear otro div que tenga solo el video y que este se muestre solo en moviles y ocultas el otro.

La otra opcion es que le coloques una clase a cada uno de esos elementos y lo ocultes despues con CSS

Antoniio1 · 13 Sep 2019

Hola, encontré el elemento inspeccionando y coloqué "display: none", sí se borra en ese momento:

pero cuando entro al archivo y lo busco me aparecen muchos:

Ahí no sé en cuál ponerle el display none para que no se vea.

Saludos.

Video en WordPress no se adapta a versión móvil

Antoniio1

YeltsinReyes

raul777

Antoniio1

raul777

Antoniio1

raul777

Antoniio1

raul777

Antoniio1

seba767

Antoniio1

raul777

Antoniio1

raul777

Antoniio1

Temas similares