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

[Antoniio1]

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]

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]

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]

.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]

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

 

[Antoniio1]

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é:

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

 

[raul777]

Si ves que no se modifica prueba ponerle !important

display: block !important;

 

[Antoniio1]

De hecho, ya lo puse, mira:

Pero cuando le doy inspeccionar:

 

[raul777]

Asi debe quedar

 

[Antoniio1]

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

 

[seba767]

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

 

[Antoniio1]

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]

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]

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]

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]

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.