media-queries.scss

/* =============================================================================
 * Media queries for responsive design.
 * These follow after primary styles so they will successfully override.
 =============================================================================== */

@media all and (orientation:portrait) { 
    /* ===[ Style adjustments for portrait mode goes here ]=== */
}

@media all and (orientation:landscape) { 
    /* ===[ Style adjustments for landscape mode goes here ]=== */
}

/** Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
 *    consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ 
 */

@media screen and (max-device-width: 480px) { 
    /* ===[ Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust ]=== */

    /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }  */
}

/* iPad Portrait/Browser  */

@media only screen and (min-width: 768px) and (max-width: 991px) { 
    
}

/* ===[ Mobile/Browser ]=== */

@media only screen and (max-width: 767px) { 
    
}

/* ===[ Mobile Landscape/Browser ]=== */

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    
}

/* ===[ Anything smaller than standard 960 ]=== */

@media only screen and (max-width: 959px) { 
    
}

/* iPad Portrait Only  */

@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) { 
    
}

/* ===[ Mobile Only ]=== */

@media only screen and (max-width: 767px) and (max-device-width: 1000px) { 
    
}

/* ===[ Mobile Landscape Only ]=== */

@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) { 
    
}