[Resuelto] Eliminar en elementor estarimiento background

He eliminado el background y he añadido una imagen pero

ahora no consigo el ancho completo

Hola Montserrat,

Primero que nada, has validado que estés utilizando la estructura correcta para la pagina que estas maquetando?

Recuerda que debemos establecer como plantilla de pagina "Elementor Ancho completo" si queremos que nuestros contenedores full width en efecto tomen todo el ancho de la pantalla

Por otro lado ese ancho definido en porcentajes mayores a 100% no es favorable, lo que hace es causar un espacio extra lateral que es innecesario ademas de mostrar una barra de scroll vertical

Echale un vistazo y nos comentas

Saludos!

Hola, al final he añadido la imagen como fondo porque solo quiero el ancho completo en esa sección, lo que me gustaría eliminar el efecto de estirar al entrar en pc, ¿Cómo puedo eliminarlo?, gracias

Que tal Montserrat,

He podido apreciar que has colocado la imagen como fondo y se aprecia en modo parallax

Para evitar esto (si es lo que deseas) y hacer que tenga mejor aspecto puedes ajustar el comportamiento del fondo como tal

Tambien es recomendable que la imagen de fondo tenga buena calidad-resolución de al menos 1500px de ancho

Valida y nos comentas

Saludos!

Modificado. Pero todavia se ve el efecto de extirar. Bueno que le vamos hacer. Muchas gracias. Si tienes algún consejo más no dudes en comentarlo. Que estoy aprendiendo. Gracias

Hola Montserrat.

Revisando el código que genera veo este código:

<section class="elementor-section ... elementor-section-stretched ... elementor-hidden-tablet elementor-hidden-mobile"
data-settings='{"stretch_section":"section-stretched"}'
style="width: 2666px; left: -673px;">

La sección sí está configurada como “stretched” (estirada) eso está bien. PERO también tiene estas clases:

elementor-hidden-tablet y elementor-hidden-mobile

Eso significa que esa sección completa (el slider entero) está oculta en tablet y móvil mediante CSS (display: none en esos breakpoints).

Al cargar la página, primero aplica el display:none que corresponde a los breakpoints de móvil/tablet (aunque estés en desktop, el código está ahí).
Después, cuando el JavaScript de Elementor termina de cargar, detecta que en desktop no debe estar oculta, quita el display:none y aplica el stretch.
Como el stretch se aplica con JavaScript (y además con left: -673px y width: 2666px para centrarlo), hay un microsegundo en el que la sección está visible pero aún sin stretch, aparece estrecha y centrada. Unos milisegundos después el JS la estira y la desplaza con left: -673px.

Vamos a ver si tenemos suerte y lo podemos solucionar con un poco de CSS.

.- Añade lo siguiente en apariencia -> Personalizar -> CSS Adicional:

/* Fuerza que la sección stretched se muestre y estire desde el primer momento en desktop */
@media (min-width: 1025px) {
.elementor-hidden-tablet.elementor-hidden-mobile.elementor-section-stretched {
display: block !important;
width: 100vw !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
}

Revisa si se soluciona y nos comentas.

Un saludo

Perfecto, muchas gracias, sois los mejores

Hola Pedro,

Encantados siempre de poder ayudar, si tienes alguna otra duda quedamos atentos. Si puedes nos ayudas a nosotros valorando las respuestas en el boton azul para ello.

Un saludo 🖐️