Creación de widgets sensibles

display: block;
width: auto;
margin: 0;

Contrariamente a la anchura, asigne al widget una altura fija o una altura mínima, o bien deje que su contenido determine su altura (height: auto. Es recomendable una altura automática si el widget está pensado que sea fluido.

• Utilice un sistema de cuadrícula CSS para ordenar los elementos de la interfaz de usuario en filas y columnas. Por ejemplo, el sistema de cuadrícula CSS que se utiliza en los diseños y contenedores predeterminados organiza elementos de la interfaz de usuario en una cuadrícula de 12 columnas.
• Utilice display: inline-block o float: left para que los elementos de la interfaz de usuario fluyan de izquierda a derecha o de arriba abajo.
  Nota: Si utiliza float: left, asegúrese de que al final se borre el flotante. Por ejemplo:

  
  .myContainer:after {
  content: "";
  display: block;
  clear: both;
  }
  

  No obstante, asegúrese de que utiliza float: right en lugar de idiomas RTL.

• Utilice overflow: scroll en combinación con min-width si desea visualizar los elementos de la interfaz de usuario que requieren una cantidad mínima de espacio horizontal. Por ejemplo, tablas. Los divs desplazables suelen funcionar bien en la mayoría de navegadores web para tabletas y móviles actuales; no obstante es posible que algunas versiones antiguas de los dispositivos o navegadores web no los visualicen correctamente.

• Evite fijar las alturas de los bloques de texto en un contenedor de líquido, ya que el texto puede volver a fluir o a ajustarse cuando cambia el ancho del contenedor. Si desea que el bloque de texto tenga una altura mínima, utilice min-height.
• Evite el uso de line-height para especificar la altura de un bloque de texto de una sola línea ya que no se visualiza correctamente si el texto se ajusta. Utilice en cambio el relleno si desea rellenar el bloque de texto.
• Contemple el uso de display: table-cell si desea centrar verticalmente el texto que se pueda ajustar.

• Si utiliza un sistema de cuadrícula CSS sensible, utilícelo para definir el comportamiento sensible como apilamiento de columnas en pequeñas pantallas.
• Utilice las consultas de medios CSS para optimizar el estilo del widget para diferentes puntos de interrupción. Para alinear con el estilo predeterminado, optimice para los rangos de página siguientes:

  Puntos de interrupción del rango de páginas de la tienda de inicio Aurora

  Dispositivo	Punto de interrupción de rango	Rango de la página
  Escritorio	RWD-C	1281 píxeles CSS y superior
  Tableta	RWD-B	601 - 1280 píxeles CSS
  Mobile	RWD-A	600 CSS píxeles y superior

• Utilice JavaScript para dividir el contenido del widget en varias páginas, en función de la cantidad de espacio disponible. Recuerde que los compradores que utilizan dispositivos de pantalla táctil esperan que la paginación funcione mediante el deslizamiento rápido. Si es posible, implemente el soporte para sucesos táctiles y sucesos de punteros MS.