Page level breakpoints

nana Jeon
nana Jeon
Aug 26, 2017 · 2 min read

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;
}
}

Design & Code Repository

)

nana Jeon

Written by

nana Jeon

UI / Visual designer who loves CSS 🧙🏻‍♀️

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade