Double breakpoint bug

A double breakpoint in our CSS media-queries is rarely noticed, but it could break our website at a specific resolution.

This article is an introduction to the double breakpoints notion. In the next article, “How to prevent double breakpoint?”, I will try to bring some solutions adapted to different kind of projects.

What is a double breakpoint?

The following sentence is quite ambiguous: “I added a breakpoint at 320px”. It could be between 319-320px or 320-321px. A breakpoint is not at a specific resolution. It's the transition.

Defining a breakpoint as only one resolution could make you write this following code.

@media (max-width: 320px) {
  /* Applied below and at 320px */
}
@media (min-width: 320px) {
  /* Applied above and at 320px */
}

Play with this example on jsbin

In this case, the two declarations will be interpreted at 320px. So we should test our website below, above and at 320px. This is a double breakpoint.

How could it be bad?

If you have a double breakpoint in your CSS, you mainly have one resolution you will never test. But perhaps one day, a device will come out with this specific resolution and your website may not work properly on it.

The damages will depend on what you style inside the media queries. It could completely break a core functionality, like the navigation below:

At 642px, a complete menu is displayed.

At 640px, a drop-down menu.

At 641px, no navigation.

Disclaimer: I contacted the owners of this site to alert them on this bug.

Conclusion

If you use the same values for "min" & "max" media-queries, you will introduce a double breakpoint. This could be risky and complicates your test procedures.

I created a bookmarklet to find the double breakpoints and see the your design at this specific resolution.

In the next article, “How to prevent double breakpoint?”, I wrote about the different solutions to prevent the double breakpoint bugs.

tl;dr

Do not use the same values for "min" & "max" media-queries.