Add variables for largest screen size, instead of using breakpoint minus 1pixel

src/definitions/collections/grid.less

@@ -139,35 +139,35 @@ body > .ui.grid:not(.page) {
   margin-right: @computerGutter;
 }
 
-@media only screen and (max-width : (@tabletBreakpoint - 1)) {
+@media only screen and (max-width: (@largestMobileScreen)) {
   .ui.page.grid {
     width: @mobileWidth;
     margin-left: @mobileGutter;
     margin-right: @mobileGutter;
   }
 }
-@media only screen and (min-width : @tabletBreakpoint) {
+@media only screen and (min-width: @tabletBreakpoint) {
   .ui.page.grid {
     width: @tabletWidth;
     margin-left: @tabletGutter;
     margin-right: @tabletGutter;
   }
 }
-@media only screen and (min-width : @computerBreakpoint) {
+@media only screen and (min-width: @computerBreakpoint) {
   .ui.page.grid {
     width: @computerWidth;
     margin-left: @computerGutter;
     margin-right: @computerGutter;
   }
 }
-@media only screen and (min-width : @largeMonitorBreakpoint) {
+@media only screen and (min-width: @largeMonitorBreakpoint) {
   .ui.page.grid {
     width: @largeMonitorWidth;
     margin-left: @largeMonitorGutter;
     margin-right: @largeMonitorGutter;
   }
 }
-@media only screen and (min-width : @widescreenMonitorBreakpoint) {
+@media only screen and (min-width: @widescreenMonitorBreakpoint) {
   .ui.page.grid {
     width: @widescreenMonitorWidth;
     margin-left: @widescreenMonitorGutter;
@@ -670,7 +670,7 @@ body > .ui.grid:not(.page) {
 -----------------------*/
 
 /* Mobile Only Hide */
-@media only screen and ( max-width : (@tabletBreakpoint - 1px) ) {
+@media only screen and ( max-width: @largestMobileScreen ) {
   .ui.tablet:not(.mobile).only.grid,
   .ui.grid > .tablet:not(.mobile).only.row,
   .ui.grid > .tablet:not(.mobile).only.column,
@@ -685,7 +685,7 @@ body > .ui.grid:not(.page) {
   }
 }
 /* Tablet Only Hide */
-@media only screen and (min-width: (@tabletBreakpoint)) and (max-width: (@computerBreakpoint - 1px) ) {
+@media only screen and (min-width: (@tabletBreakpoint)) and (max-width: @largestTabletScreen ) {
   .ui.mobile:not(.tablet).only.grid,
   .ui.grid > .mobile:not(.tablet).only.row,
   .ui.grid > .mobile:not(.tablet).only.column,
@@ -701,7 +701,7 @@ body > .ui.grid:not(.page) {
 }
 
 /* Computer Only Hide */
-@media only screen and ( max-width : (@computerBreakpoint - 1px) ) {
+@media only screen and ( min-width: (@computerBreakpoint) ) {
   .ui.mobile:not(.computer).only.grid,
   .ui.grid > .mobile:not(.computer).only.row,
   .ui.grid > .mobile:not(.computer).only.column,
@@ -722,7 +722,7 @@ body > .ui.grid:not(.page) {
 
 
 /* Mobily Only */
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width: @largestMobileScreen) {
   .ui.doubling.grid > .row {
     display: inline;
   }
@@ -792,7 +792,7 @@ body > .ui.grid:not(.page) {
 }
 
 /* Tablet Only */
-@media only screen and (min-width : @tabletBreakpoint) and (max-width : (@computerBreakpoint - 1px)) {
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
   .ui.doubling.grid > .row {
     display: inline;
   }
@@ -865,7 +865,7 @@ body > .ui.grid:not(.page) {
       Stackable
 --------------------*/
 
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width: @largestMobileScreen) {
   .ui.stackable.grid {
     display: block !important;
     padding: 0em;

src/definitions/modules/modal.less

@@ -155,7 +155,7 @@
 --------------------*/
 
 /* Modal Width */
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width : @largestMobileScreen) {
   .ui.modal {
     width: @mobileWidth;
     margin: @mobileMargin;
@@ -188,7 +188,7 @@
 
 
 /* Position Adjustments */
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width : @largestMobileScreen) {
    /*rtl:ignore*/
   .ui.modal .content > .image {
     display: block;
@@ -305,7 +305,7 @@
   color: @innerCloseColor;
 }
 
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width : @largestMobileScreen) {
   .ui.fullscreen.modal {
     width: auto !important;
     margin: @fullScreenMobileMargin !important;
@@ -328,7 +328,7 @@
 }
 
 /* Small Modal Width */
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width : @largestMobileScreen) {
   .ui.small.modal {
     width: @smallMobileWidth;
     margin: @smallMobileMargin;
@@ -363,7 +363,7 @@
 .ui.large.modal > .header {
   font-size: @largeHeaderSize;
 }
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width : @largestMobileScreen) {
   .ui.large.modal {
     width: @largeMobileWidth;
     margin: @largeMobileMargin;

src/definitions/views/card.less

@@ -511,7 +511,7 @@ a.ui.card:hover,
 --------------------*/
 
 /* Mobily Only */
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width : @largestMobileScreen) {
   .ui.two.doubling.cards {
     margin-left: @oneCardOffset;
     margin-right: @oneCardOffset;
@@ -596,7 +596,7 @@ a.ui.card:hover,
 }
 
 /* Tablet Only */
-@media only screen and (min-width : @tabletBreakpoint) and (max-width : (@computerBreakpoint - 1px)) {
+@media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) {
   .ui.two.doubling.cards {
     margin-left: @oneCardOffset;
     margin-right: @oneCardOffset;
@@ -684,7 +684,7 @@ a.ui.card:hover,
       Stackable
 --------------------*/
 
-@media only screen and (max-width : @tabletBreakpoint) {
+@media only screen and (max-width : @largestMobileScreen) {
   .ui.stackable.cards {
     display: block !important;
   }

src/themes/packages/default/globals/site.variables

@@ -104,6 +104,9 @@
 @largeMonitorBreakpoint      : 1400px;
 @widescreenMonitorBreakpoint : 1900px;
 
+@largestMobileScreen         : (@tabletBreakpoint - 1px);
+@largestTabletScreen         : (@computerBreakpoint - 1px);
+
 
 /*******************************
            Power-User