¡Hola! En esta clase, aprendimos cómo hacer que nuestro proyecto web sea más adaptable a diferentes tamaños de pantalla.
Primero, vimos que nuestro contenido se veía apretado en pantallas más pequeñas debido al padding que habíamos establecido. Para solucionar esto, cambiamos el padding en nuestra versión de medios.
Luego, exploramos el uso de width para controlar el ancho del contenido. Descubrimos que establecer width en 0% hacía que el diseño se viera extraño. En cambio, aprendimos que width: auto es la mejor opción para que el contenido se adapte al tamaño del elemento padre.
Finalmente, comparamos width: auto con width: 100%. width: auto se adapta al tamaño del elemento padre, mientras que width: 100% siempre ocupa el 100% de la pantalla, independientemente del tamaño del contenido.
