#queria consultar por que no me adapta a la totalidad del ancho de pantalla cuando pongo 100 vw tal cual lo indico la instructora. Aparece la imagen corrida hacia la derecha. Ese espacio solo desaparece cuando elimino el padding left y right de 6% que esta en el archivo bases.css en la clase .container
Hola Laura , espero que estés muy bien.
Creo que puede ser en otra parte de tu codigo el problema . Pido que comparta tu codigo con nosotros para que posamos resover el problema.
Un saludo.
hola Laura ¿puede ser que tengan el mismo nombre y se "pisen"? Igual, como dijo Ingrid, podrias compartir una parte del codigo para ver si esta bien. ¿hay algo mas que contenga al container? no me quedo claro si el archivo bases.css es otro diferente a donde tienes la clase container, pero si es el mismo es eso. puesto que el padding es el espacio interno del div y si tiene espacio nunca va a cupar el 100%
#si, claro!! este es el bases.css
:root {
--background-llamada-mobile: #00161c;
--background-blanco: #ffffff;
--background-azul-claro: #dfe3f5;
--background-ceniza-claro: #f7f4f4;
--background-ceniza-medio: #d9d9d9;
--border-cabecera-mobile: #103d4a;
--boton-rojo: #b72e2e;
--fuente-ceniza-claro: #666666;
--fuente-ceniza-oscuro: #4f4c4c;
--planes-card-start: #035a76;
--planes-card-ultra: #690f8e;
--planes-card-mega: #b00024;
--fuente-enlace: #0006ff;
--background-footer: #333333;
--montserrat: "Montserrat", sans-serif;
--open-sans: "Open Sans", sans-serif;
}
body {
font-family: var(--montserrat);
}
.container {
padding-right: 6%;
padding-left: 6%;
}
.boton {
text-align: center;
display: block;
width: 100%;
max-width: 350px;
box-sizing: border-box;
padding: 1rem 2rem;
border: 1px solid var(--boton-rojo);
border-radius: 5px;
}
#este es el destacados.css en donde esta la imagen en cuestion
.destacados {
background: var(--background-azul-claro);
padding-top: 2.5rem;
padding-bottom: 2rem;
}
.destacados__titulo {
color: var(--fuente-ceniza-oscuro);
font-weight: 700;
font-size: 1.5rem;
font-family: var(--montserrat);
text-transform: uppercase;
text-align: center;
margin-bottom: 2rem;
}
.destacados__panel {
display: flex;
flex-direction: column;
text-align: center;
margin-bottom: 2rem;
}
.destacados__panel-imagen {
width: 100vw;
max-width: 600px;
box-shadow: 0px 2px 10px 5px #00000020;
margin-bottom: 0.5rem;
}
.destacados__panel-texto {
font-weight: 700;
font-size: 1.2rem;
line-height: normal;
}
.destacados__boton {
color: var(--boton-rojo);
border-color: var(--boton-rojo);
margin: 0 auto;
}
#Intente poniendo !important en .destacados__panel-imagen para que me tome el width 100vw sin el padding del .container del otro css pero tampoco funciono
Hola, no se si esta sea la solución, pero revisa en el index,<head>
<meta name="viewport" content="width-device-width, initial-scale=1.0"> que tenga la coma que separa width e initial. Saludos
hola amig@s !!!
Laura , podrias compartir el codigo html.
Hola!!! Laura podrías compartir el codigo HTML.