CSS Editor
Breakpoints
Live Preview
400 × 300 px
Responsive Card
This card adapts based on its container's width, not the viewport. Try resizing!
Media Query Comparison
Container Query: responds to container width
Media Query: responds to viewport width
Resize the container above vs. resize your browser window to see the difference.
Media Query: responds to viewport width
Resize the container above vs. resize your browser window to see the difference.