8
respuestas

pequeño error

hola buenas comunidad, queria que alguien me pueda dar una mano ya que no hallo el pequeño error que tiene mi marco central de la pagina , la primera y tercera estan alineados las lineas de los marcos pero el del medio se encuentra un poco mas pequeña que las antes mencionoadas, comparto mi codigo Css y pantallazo de mi programa .Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

header{
    background-color: #BBBBBB
    padding: 20px 0;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;

}
nav{
    position: absolute;
    top: 110px;
    right: 0px;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
}

nav a{  
    text-transform: uppercase;   /*para que utilizamos uppercase?*/
    color: black; 
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;


}

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
   /* background: #CCCCCC       solo lo usamos para identificar el marco del item con el color agregado*/
    margin: 0 1.5%;             /*para separar de la zona vertical y zona lateral del espaciamiento de los items, 0 vertical y 1.5 laterales */
    padding: 30px 20px;         /*para dar espaciamiento interno del item  */
    box-sizing: border-box;     /* tamaño de la caja*/
    border: 2px solid #000000;

    /*border-color:#000000;     tambien puede realizarse asi el borde de nuestros items
    border-width: 2px;
    border-style: solid; /*linea solida del marco */
}

.productos h2{
    font-size: 30px;            /*con font-size se cambia el tamaño de la letra */
    font-weight: bold;
}

.producto-descripcion{
    font-size:18px ;
}

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;          /*para separar la descripcion producto - precio */
}
8 respuestas

Hola, revisando tu código, se despliega correctamente. La propiedad que da el porte de los productos es padding: 30px 20px; la única forma que pude replicar tu problema fue al darle un padding de 30px 10px. Prueba, guardar tus cambios nuevamente, y si ya se ven reflejados los valores correctos padding: 30px 20px;

Si te sirvió mi respuesta no olvides marcarla como solución! ;D

hola natalia, hice lo que me pediste pero la verdad ahora cambio el 3ro item y quedo parejo con el de la mitad, el primero quedo mas grande que los otros 2, muestro mi pantallazo, lo unico que cambie fue lo que me pediste en el padding a 10px, volvi a ponerle los valores originales y nuevamente el de la mitad quedo mas pequeño que el 1mero y 3ro .![Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad] (https://cdn1.gnarususercontent.com.br/6/446335/df401783-1dc4-4e47-b21b-0015db0ca6e1.png) Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

y tampoco me sale el fondo en el head el color gris que debe llevar , puedes guiarme ? muchas gracias

Tengo el mismo problema!

NO SE HA RESUELTO DICHO PROBLEMA, TOCO BUSCAR EN OTRO MEDIO

en cuanto al color de fondo es el background del head finalízalo con un ; punto y coma

.productos { text-align: center; top: 110px; right: 0; padding: 50px; cursor: pointer; } .productos li { margin: 10px 1%; display: inline-block; vertical-align: top; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px;

} .productos h2 { font-size: 25px; font-weight: bold; }

esta es la solución pruébala y luego las comparas así me evito una explicación muy extensa.

que tal? probé tu solución y no me funciono

hola carolina fíjate donde dice .productos y separarlos que queden como la imagen que puso stive