Striving to create a responsive website utilizing the Bourbon Neat grid, I encountered an issue. While resizing the browser on my computer to simulate a phone screen, the media queries functioned as expected. However, when loading the site on an actual phone, none of the mobile changes appeared.
Currently, my code looks like this:
// Breakpoints
$mobile: new-breakpoint(max-width 480px, 12);
$landscape: new-breakpoint(max-width 780px min-width 481px, 16);
$desktop: new-breakpoint(min-width 781px);
/***************
ONBOARDING
***************/
.onboarding {
@include media($mobile) {
@include span-columns(10);
@include shift(1);
}
@include media($landscape) {
@include span-columns(9);
@include shift(4);
}
@include media($desktop) {
@include span-columns(8);
@include shift(8);
}
}
I am wondering if there is any additional code needed in order to resolve this issue?