Slight issue with these breakpoints. You cannot define @md as 768px, then do:

@media (min-width: @md) and @media (max-width: @md)

Need to be changed to something like:

@xs: 320px;
@sm: 480px;
@md: 768px;
@lg: 979px;
@xl: 1200px;

@sm-max: @sm - 1;
@md-max: @md - 1;
@lg-max: @lg - 1;
@xl-max: @xl - 1;

Then when doing the media queries:

@media (min-width: @md-max)

@media (max-width: @md)

Yea that crossed my mind. My understanding is that they would simply cascade and the second rule would apply if a screen width was exactly on a breakpoint.

As we have a pretty random order of min/max width media queries, it makes more sense to do as you suggest.

I'll sort this out later.

Sorted now... thx Charlie

I have tested this item ✅ successfully on 4ae5b18

I do not have an experience, but why?
@lg: 979px;
I would expect:
@lg: 980px;

It is related to current changes:

-@media (max-width: 979px) {
+@media (max-width: 978px) {

In most cases the variables match the already existing values. I believe the 979px value comes from the bootstrap original breakpoint.. https://github.com/joomla/joomla-cms/blob/staging/media/jui/less/variables.less#L179

@csthomas can you please test so we get the second Test?

I did code review and I see one problem:

-@media (max-width: 979px) {
+@media (max-width: 978px) {

IMO this changes in a few lines is wrong and should be reverted. max-width should be 979px.
and variable @lg should be set to: 980px;

I talked with Charlie about it, I think he should agree with me but he has not answered yet to my last question.
@C-Lodder Could you confirm?

ah yes that's correct.

@lg should be 980px so that we match up with the BS2 grid:

/* Large desktop */
 @media (min-width: 1200px) { ... }
  
 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 979px) { ... }
  
 /* Landscape phone to portrait tablet */
 @media (max-width: 767px) { ... }
  
 /* Landscape phones and down */
 @media (max-width: 480px) { ... }

I have tested this item ✅ successfully on 6342355

@Quy can you please test again?

I have tested this item ✅ successfully on 6342355

RTC after two successful tests.

Apparently merging another PR caused this to conflict...