Conseguir pantalla completa en versión móvil con Elementor

eswal200 · 4 May 2022

Hola gente.

Estoy trabajando en una web y el index solo sera una seccion full screen con un video de fondo.
En la version escritorio se ve perfecto, pero en movil se ve mal.

Lo que necesito es que el video ocupe todo el largo del movil.

en los ajustes de elementor lo tengo como ful screen para escritorio, movil y tablet pero he probado con otros video y pasa igual

Alguien tiene idea de como poder hacerlo .

Gracias.

EDDesign · 4 May 2022

Debes indicarle a Elementor que el cuadro contenedor del video sobre salga de los margenes. Ya, mediante medidas porcentuales o por pixeles, puedes ajustar el tamaño hasta ocupar toda la pantalla.

También puedes hacerlo mediante CSS, dile al reproductor que ocupe el 100% de la altura y listo. Por defecto está en auto y por tanto mantiene la proporción en relación al ancho.

Saludos bro!

eswal200 · 4 May 2022

EDDesign dijo:
Debes indicarle a Elementor que el cuadro contenedor del video sobre salga de los margenes. Ya, mediante medidas porcentuales o por pixeles, puedes ajustar el tamaño hasta ocupar toda la pantalla.

También puedes hacerlo mediante CSS, dile al reproductor que ocupe el 100% de la altura y listo. Por defecto está en auto y por tanto mantiene la proporción en relación al ancho.

Saludos bro!

Hola bro.

Ya he echo lo que dices, si es cierto que ocupa todo el alto cuando añades css pero el video se reproduce a 640x360 y lo que hace es aparecer un fondo negro.

esta es la web: http://creatuwebspicy.xyz/

EDDesign · 4 May 2022

La calidad de video ya es otra cosa, es la fuente original.

Agrega Flex Max Contenido.
El video estiralo a 3000px (por ejemplo) a los lados y ya está.

Otro dato. Puedes tener un video secundario, el cual solo se muestre en pantallas inferiores a resoluciones que determines.

eswal200 · 4 May 2022

como añadiste el css de Flex Max

EDDesign · 4 May 2022

eswal200 dijo:
como añadiste el css de Flex Max

Wordpress tiene en personalizar una sección para agregar CSS personalizado. Ponle nombre a tu bloque, donde está el video y agrega una linea adicional con esa orden.

Inspecciona el elemento con el navegador para obtener el código actual. Solo agrega la linea.

eswal200 · 4 May 2022

si eso lo se. me refiero al css en si:

element.style {
height: 3000px !important;
}

EDDesign · 4 May 2022

eswal200 dijo:
si eso lo se. me refiero al css en si:

element.style {
height: 3000px !important;
}

Ahí te va a agarrar cualquier cosa. El elemento debe tener un nombre

element.video {
width: 3000px
height: 800px
flex: max-content
}

Y me debes dinero 🤣

eswal200 · 4 May 2022

EDDesign dijo:
Ahí te va a agarrar cualquier cosa. El elemento debe tener un nombre

element.video {
width: 3000px
height: 800px
flex: max-content
}

Y me debes dinero 🤣

Si funciona, claro q si

Conseguir pantalla completa en versión móvil con Elementor

eswal200

EDDesign

eswal200

EDDesign

eswal200

EDDesign

eswal200

EDDesign

eswal200

Temas similares