Max-height and max-width media query not working?

Question

My site is responsive for width using bootstrap, but I'm also trying to get one section to specifically be responsive for Landscape media queries... but when I do the live BrowserSync, it's not taking into consideration any of my media query requests... Any tips are appreciated.

In my style.scss, does the media query section need to be in a particular layout? Right now I just put it in the middle?

@media all and (max-height: 267px) and (max-width: 667px) {
body {
    overflow-x: hidden;
}

#header {
    .name-tag-image {
        width: 400px;
        height: auto;
        padding-right: 20px;
        margin-left: 40px;
        padding-top: 75px;
    }

    .my-name-is-text {
        font-size: 1rem;
        font-weight: 400;
        padding-bottom: 0px;
        margin-bottom: -20px;
    }

    #resume-buttons {
        .resume-header-button {
            margin-top: 15px;
        }
    }

    .btn-circle.btn-xl {
        width: 30px;
        height: 30px;
        padding: 3px 6px;
        font-size: 12px;
        line-height: 1.33;
        border-radius: 35px;
        border: 3px solid #fff;
    } 
}

}

Answer 1

In addition to the important comment above by ittus

In my style.scss, does the media query section need to be in a particular layout?

Yes, order matters. The usual cascading rules apply, so if you have

@media all and (max-height: 267px) and (max-width: 667px) {
body {
    overflow-x: hidden;
}  
...  
}  

and later in your stylesheet you had

body{
overflow-x:visible;  
}  

then styling of overflow-x:visible; would be applied at all viewports.

Also, a max height of 267px seems low, I think an iPhone5 in landscape would be 320, and most newer smartphones would be higher.

Good luck!