Loading tool...
Loading tool...
Use named containers to target specific elements
.container {
container-type: inline-size;
}
@container (min-width: 300px) {
/* Styles for breakpoint 1 */
.child {
/* Your responsive styles here */
color: blue;
font-size: 1.2rem;
}
}Container Content
Drag the corner to resize
Condition Status:
Container queries allow elements to respond to their container's size instead of the viewport. Perfect for modular components.
inline-size - Query based on widthsize - Query both width and heightcqw/cqh - Container percentage units