Solucionado
hola,
¿Cómo se hace para que la pagina que estamos creando, en este caso (Productos) sea adaptativa? pasa que en la pagina "barbería alura" si yo cambio manualmente el tamaño de mi navegador la pagina se adapta y todo sigue quedando dentro de la ventana del navegador, pero con "Productos" no pasa lo mismo ( las cajas de productos no cambian de tamaño para adaptarse a la ventana)
O_O
Hola! En el ultimo curso, la parte 4 de HTML y CSS, el instructor explica muy bien como hacerlo para poder adaptarlo. Saludos!
Hola Andrea, te cuento que eso se hace por medio de las media queries de CSS en donde se pueden definir varios puntos de ruptura para poder establecer nuevas propiedades de CSS que son aplicadas al tamaño definido. por ejemplo te comparto algunas media queries comunes:
/* Dispositivos pequeños (tabletas verticales y teléfonos grandes, 600 px y más) */
@media only screen and (min-width: 600px) {
body {
background: green;
font-size: 40px;
}
}
/* Dispositivos medianos (tabletas horizontales, 768 px y más) */
@media only screen and (min-width: 768px) {
body {
background: blue;
font-size: 30px;
}
}
/* Dispositivos grandes (laptops/de escritorio, 992px y más)*/
@media only screen and (min-width: 992px) {
body {
background: orange;
font-size: 20px;
}
}
Saludos!