Learn how CSS conditionally applies styles based on viewport size, orientation, color-scheme preference, and more.
Drag the right edge of the preview to resize it. Watch breakpoints fire and the layout adapt in real-time.
Beautiful interfaces crafted with care and precision.
Fast, modern code built for performance and scale.
Ship with confidence using automated pipelines.
/* Base styles (no media query) */
.pg-cards {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}Craft your own media query and see it apply to a live preview.
@media (min-width: 600px) {
.target {
background-color: #f2ba49;
}
}Pre-built responsive patterns. Click each tab to see the code and watch the playground react.
A quick reference of the most useful media features available in CSS.
@media (min-width: 768px) { … }
Targets viewports at or above/below a specific width. The most commonly used media feature.
@media (min-height: 600px) { … }
Targets viewports at or above/below a specific height. Useful for landscape layouts.
@media (orientation: portrait) { … }
Matches when height ≥ width (portrait) or width > height (landscape).
@media (prefers-color-scheme: dark) { … }
Detects if the user has requested a light or dark color theme at the OS level.
@media (prefers-reduced-motion: reduce) { … }
Detects if the user prefers minimal animations. Essential for accessibility.
@media (hover: hover) { … }
Detects if the primary input mechanism can hover over elements. False on touchscreens.
@media (min-aspect-ratio: 16/9) { … }
Targets viewports with a specific aspect ratio. Great for cinematic layouts.
@media (pointer: coarse) { … }
Detects input precision — coarse for touch, fine for mouse. Adjust tap targets accordingly.