noclist noclist - 28 days ago 7
Less Question

Using media query min-width for mobile breakpoints

I'm attempting a mobile first layout using media queries with min-width requirements. Is the only way to achieve "greater than but NOT equal to" a min width by adding 1? That seems unintuitive to me, as I am storing my breakpoint values in LESS variables, and would like the actual breakpoint to be stored without the plus one.

@mobile-breakpoint: 361px;
// breakpoint is actually at 360px

@media (min-width: @mobile-breakpoint) {
//styles for widths greater than but not equal to 360
}

Answer Source

Use calc function in your media queries to add 1px in multiple breakpoints

@mobile-breakpoint: 360px;

@media (min-width: calc(@mobile-breakpoint + 1px)) {
    //styles for widths greater than but not equal to 360
}

Unfortunately we don't have any other simple ways to get the exact greater than method in media queries

The LESS way:-

As seven-phases-max mentioned we can achieve the same using LESS way by simply adding +1 like

@mobile-breakpoint: 360px;

@media (min-width: (@mobile-breakpoint + 1)) {
    foo {bar: baz}
}