Bourbon Neat breakpoints not working on phone

Question

I am trying to make a responsive website based on the Bourbon Neat grid. My media queries work perfectly when I am resizing the browser on my own computer to the size of a phone, yet when I load the site on my phone, none of the mobile changes appear.

I have the following code at the moment:

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

Is there anything else I need to include in order to make this work?

Answer 1

Seems like you're forgetting the viewport meta tag.

Try adding this to your html head:

<meta name="viewport" content="width=device-width, initial-scale=1">