[Duda] Diseño responsive

¡Hola Ricardo!

Gracias por compartir tu duda con nosotros. Entiendo que estás trabajando en un diseño responsive y que te gustaría mejorar la visualización de las recetas en resoluciones de pantalla más pequeñas.

Una posible solución podría ser utilizar media queries para ajustar el tamaño de las recetas en diferentes resoluciones de pantalla. Por ejemplo, podrías definir un ancho máximo para las recetas en la regla CSS correspondiente a la resolución de pantalla de 992px, y luego ajustar ese ancho máximo en reglas para resoluciones de pantalla más pequeñas.

Aquí te dejo un ejemplo de cómo podrías hacerlo:

.recetas {
  max-width: 100%;
}

@media (min-width: 768px) {
  .recetas {
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  .recetas {
    max-width: 30%;
  }
}

En este ejemplo, la clase .recetas tiene un ancho máximo del 100% en pantallas pequeñas. En pantallas medianas (768px o más), el ancho máximo se reduce al 50%. Y en pantallas grandes (992px o más), el ancho máximo se reduce aún más al 30%.

Espero que esta solución te sea útil. Si tienes alguna otra duda, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!