Responsive Breakpoints

resp-helpers.scss

// ==========================================================================
// responsive breakpoints
// 320 - 480 - 768 - 1024
// ==========================================================================

@media screen and (max-width: 30em) {
    // helper to display 320px width on desktop
    // comment this out if you need to look @ 480px width
    .wl-appwrapper {
        width: 320px;
    }
}

// min 480px
@media screen and (min-width: 30em) {
    #footer:after {        
        content:"min-width: 480px / 30em";
        margin-top: 20px;        
        width: 100%;
        height: 20px;
        background-color: #ebebeb;
        color: #000;
        z-index: 100;
        font-size: 12px;
        background-color: #ccc;
    }        
}

// min 768px
@media screen and (min-width: 48em) {
    #footer:after {
        content:"min-width: 768px / 48em";
        background-color: #666;
    }
}

// min 964px - full width
@media screen and (min-width: 60.25em) {
    #footer:after {
        content:"min-width: 964px / 60.25em - full width";
        background-color: #999;
    }
}