Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Consulta haciendo la web de la Barbería

Tengo el código exactamente igual que como está acá y las opciones de los servicios no me quedan alineadas como se muestra en el video. No sé qué puede ser. El servicio de cabello me queda un poco más largo que los otros dos.

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

.productos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px  solid #000000;
}

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

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

.producto-precio {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px 
    }

Foto de ejercico de Barbería Actualizo: Logré que me queden iguales, tenía algunos errores de tipeo de las class en el html. Logré que me queden los 2 primeros iguales pero el de "Corte + barba" no me queda del mismo tamaño porque yo le puse otro texto en mi caso, "promo corte de cabelo + barba". Modifiqué también ese texto y lo puse tal cual en el video: "Paquete completo de cabello + barba". Y ahora sí quedan los 3 servicios iguales.

PREGUNTO ENTONCES:

Tengo alguna manera de que queden las cajas de los servicios del mismo tamaño si yo cambiara los textos en alguno de ellos o en todos? Porque si habiendo aplicado el mismo CSS a todo el bloque, resultó que la última (la de cabello + barba) quedaba más corta porque le puse un texto un poco más corto. No entiendo, por qué, igual no se ajustó al mismo diseño/tamaño que las otras.

1 respuesta

¡Hola Estudiante!

Es normal que si cambias el texto de un elemento, el tamaño de la caja pueda variar. Esto se debe a que el tamaño de la caja se ajusta automáticamente al contenido que contiene.

Para solucionar esto, puedes establecer un alto fijo para todos los elementos de la lista de productos, de esta manera, aunque cambies el texto, el tamaño de la caja no variará.

Para hacer esto, agrega la propiedad height a la clase .productos li y establece un valor en píxeles que te parezca adecuado para todos los elementos. Por ejemplo:

.productos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    height: 350px; /* Establece un alto fijo para todos los elementos */
}

Espero que esta solución te ayude a mantener el mismo tamaño de caja para todos los elementos, independientemente del texto que contengan. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)