Responsive design & media queries

@media (max-width: 800px) { ... } — apply CSS only when the viewport matches. Mobile-first.

Code example

.grid { display: grid; grid-template-columns: 1fr 320px; }

@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }  /* stack on mobile */
  .sidebar { display: none; }            /* hide on phone */
}

How it works

A media query applies CSS only when the viewport matches a condition. max-width: 800px means 'screens narrower than 800px' (phones, small tablets). The pattern: design the desktop layout first, then add media queries to simplify for mobile — collapse multi-column grids to single column, hide non-essential sidebars, increase touch-target sizes. OpenBenchML uses media queries on every multi-column layout: the competition detail grid, the notebook layout, the leaderboard table. Test by resizing your browser window — the layout should smoothly adapt, not break.