G225Hacer que cada panel de un carrusel quepa en 320 píxeles de ancho

Por qué es importante

El criterio de reajuste pide que el contenido se lea en 320 píxeles de ancho sin desplazarse en dos direcciones. Es lo que ve una persona con baja visión que amplía la página al 400 %.

Un carrusel es una excepción razonable: para pasar de una tarjeta a otra hay que ir a los lados. Lo que no debe pasar es que una tarjeta sea más ancha que la pantalla. Entonces hay que ir y volver en cada línea para leer el nombre, el precio o la descripción.

Cómo se hace

1. Use el desplazamiento horizontal solo en secciones divididas en paneles o tarjetas independientes.
2. Limite el ancho de cada panel a 320 píxeles CSS como máximo, por ejemplo con width: min(320px, 100%).
3. Haga que el contenido se ajuste a ese ancho: textos que bajan de línea e imágenes con max-width: 100%.
4. Deje que el panel crezca hacia abajo si el texto aumenta. El resto de la página debe desplazarse solo en vertical.
5. Asegúrese de que se llega a todos los paneles con el teclado, no solo arrastrando con el dedo o el ratón.

Cómo comprobarlo

1. Ponga la ventana del navegador a 1280 píxeles de ancho, sin contar la barra de desplazamiento.
2. Amplíe la página al 400 % (Ctrl y +).
3. Localice las secciones que se mueven a los lados y compruebe que están divididas en paneles.
4. Lleve cada panel a la vista y compruebe que se lee entero sin moverse a los lados dentro de él.

Ejemplo

Carrusel de productos: la fila se desplaza a los lados, pero cada tarjeta mide como mucho 320 píxeles.

.carrusel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
}
.carrusel .tarjeta {
  flex: 0 0 auto;
  width: min(320px, 100%);
}
.tarjeta img { max-width: 100%; height: auto; }