Which media query wins when two match?

If two max-width queries both match, the one that appears later in the CSS overrides the same properties. Put the narrower breakpoint after the wider one.

CSS Studio

Interactive Learning

On this tool

max-width queries overlap. A rule at 768px also matches 640px unless a narrower query comes later and overrides it.

Responsive

Drag the frame. The width label is the viewport this component sees. Media queries in the editor match that width.

What people get wrong

max-width queries overlap. A rule at 768px also matches 640px unless a narrower query comes later and overrides it.

Which media query wins when two match?: If two max-width queries both match, the one that appears later in the CSS overrides the same properties. Put the narrower breakpoint after the wider one.

Media Queries

Write CSS with @media rules to see how the box changes at different widths.

800px

Tablet Landscape (< 1024px)

0px800px

Responsive Component

Resize the viewport to see me change!

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6