Page level breakpoints

When we setup the media queries for breakpoints, for the page level, this is how we usually set.

• Root: objects/scss/variables.scss

// Page level breakpoints
$mq-small: 'screen and (max-width: 37.438em)';    // max up to 599px
$mq-medium: 'screen and (min-width: 37.5em)';     // min from 600px
$mq-large: 'screen and (min-width: 60em)';        // min from 960px
$mq-base: 'screen and (min-width: 75em)';  // min from 1200px
// Mobile side padding
$mobile-side-padding: 1.25rem; // 20px
// Base desktop width in design
$base-width: 75rem; // 1200px
// Styles
.o-container {
  background-color: aquamarine;
  margin: 0 $mobile-side-margin;
  @media #{$mq-base} {
    background-color: darksalmon;
    max-width: $base-width;
    margin: 0 auto;
  }
}

However there is one issue with the above variables like the screencast below:

This is because of the conflicts between the $mobile-side-padding, $base-width and the media query ($mq-base).

Like the infographic above, to remove the sudden switch on the desktop base width, we need to add the $mobile-side-padding to the $base-width.

In that way, we can naturally switch the media query over to the desktop base width without the sudden jump.

• Root: objects/scss/variables.scss

$base-width: 75rem; // max-width: 1200px
$mobile-side-margin: 1.25rem; // 20px
$base-mq: $base-width + ($mobile-side-margin * 2); 
// Page level breakpoints
$mq-small: 'screen and (max-width: 37.438em)';    // max up to 599px
$mq-medium: 'screen and (min-width: 37.5em)';     // min from 600px
$mq-large: 'screen and (min-width: 60em)';        // min from 960px
$mq-base: 'screen and (min-width: $base-mq)';     // min from 1240px

• Root: objects/scss/main.scss

@import 'variables';
@import 'functions';
// Styles
.o-container {
  background-color: aquamarine;
  margin: 0 $mobile-side-margin;
@media #{$mq-base} {
    background-color: darksalmon;
    max-width: $base-width;
    margin: 0 auto;
  }
}