Double breakpoint bug

See comments

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:

Screenshot at 642px At 642px, a complete menu is displayed.

Screenshot at 640px At 640px, a drop-down menu.

Screenshot at 641px 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.

Happy coding, Thomas Zilliox.

comments powered by Disqus
That's my face!

Thomas ZILLIOX

I am a freelance web developer. I help web teams to reduce CSS maintenance & evolution costs.