QA viewport sizes

CSS media-query notes

/* Mobile-first breakpoint notes. Keep only the rules that fix real layout changes. */

@media (min-width: 360px) {
  /* phone foundation: Marketing page phone foundation; navigation likely needs a collapsed state */
}

@media (min-width: 393px) {
  /* phone foundation: Marketing page phone foundation; navigation likely needs a collapsed state */
}

@media (min-width: 480px) {
  /* large-phone adjustment: Marketing page large-phone adjustment; navigation likely needs a collapsed state */
}

@media (min-width: 640px) {
  /* large-phone adjustment: Marketing page large-phone adjustment; card and grid columns often change here */
}

@media (min-width: 768px) {
  /* tablet entry: Marketing page tablet entry; card and grid columns often change here */
}

@media (min-width: 820px) {
  /* tablet entry: Marketing page tablet entry; card and grid columns often change here */
}

@media (min-width: 1024px) {
  /* desktop transition: Marketing page desktop transition; media crops and first-fold composition change on larger screens */
}

@media (min-width: 1280px) {
  /* desktop layout: Marketing page desktop layout; media crops and first-fold composition change on larger screens */
}

@media (min-width: 1366px) {
  /* desktop layout: Marketing page desktop layout; media crops and first-fold composition change on larger screens */
}

@media (min-width: 1440px) {
  /* desktop layout: Marketing page desktop layout; media crops and first-fold composition change on larger screens */
}

@media (min-width: 1920px) {
  /* wide-screen guardrail: Marketing page wide-screen guardrail; media crops and first-fold composition change on larger screens */
}

Responsive test plan