1. Verificación de cuadrícula de tarjetas responsiva
Desarrollador FrontendContexto
Un desarrollador acaba de implementar un diseño de tarjetas que debería cambiar de una sola columna en móviles a varias columnas en tabletas.
Problema
Necesita confirmar visualmente que el cambio de flujo de diseño ocurre exactamente en el breakpoint esperado sin romper el espaciado.
Cómo usarlo
Introduce la URL de prueba local o de staging, define los anchos de viewport en '375,768', ajusta el tiempo de espera a 500 ms y ejecuta la comparación.
url: 'https://staging.example.com/cards', viewportWidths: '375,768', viewportHeight: 600, waitMilliseconds: 500, comparisonMode: 'adjacent'Resultado
Obtiene un mapa de calor que resalta la transición del diseño de una columna a dos columnas, confirmando que no hay desbordamientos de texto.