Media query conflict at "only" breakpoints

[mobalti]

There is a potential conflict in the media queries "only" breakpoints. For example:

@media (768px <= width <= 1024px);
@media (width >= 1024px);

To resolve this conflict, we can use the "<" operator instead of "<=" for the range's upper limit. This ensures screens with a width exactly at this point are not included.

@media (768px <= width < 1024px);
@media (width >= 1024px);

[argyleink]

nice, yes, let's fix this!

a similar issue happened with the --n-below queries, and they got switched to not including =:

@custom-media --xxl-only      (1440px <= width <= 1920px);
@custom-media --xxl-n-above   (width >= 1920px);
@custom-media --xxl-n-below   (width < 1920px); ⬅️

Let's align these, like you propose:

@custom-media --xxl-only      (1440px <= width < 1920px);
@custom-media --xxl-n-above   (width >= 1920px);
@custom-media --xxl-n-below   (width < 1920px);

TODO:

• update xxs, xs, sm, md, lg, xl, and xxl -only queries to be just <
• update docsite