Media Queries

Media queries allow you to responsively apply different styling depending on a device's screen resolution. Common uses for media queries include adjusting the visibility, size, or orientation (row vs. column) of elements to better fit mobile displays, though any property can be modified as needed.

Since our main class projects target display widths of 1100px (default), 800px, and 480px, each assignment template includes predefined media queries for the two smaller values.

When testing responsiveness with embedded CodePen examples, you should open the Pen in its own window by clicking Edit On CodePen, then use your browser's Device Mode (Chromium-based) or Responsive Design Mode (Firefox).

See the Pen Media Queries (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.