Question

Once I accidentally left out some proper syntax for my media queries at the stated mobile viewport. It displayed correctly, which is awesome, but I’d like to be using the correct syntax, and am curious to know why / how this is occurring. Below are the styles involved.

/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) 

    ul.ui-tabs-nav li.ui-state-active a {
    background-color: #C6C699;
    height: 17px;
    text-shadow: none;
    width: 77px;
    }

    .content .full header, .content .full .entry-summary, .content .full   .entry-content, .content .full .entry-meta, .content .full .edit-link {
    margin-top: 3px;
    padding: 15px;
    width: 100%;
    }

    #topbgimg { display: none; }

    #topvidarea {
    margin-left: 21%;
    margin-right: 20%;
    margin-top: -5px;
    max-width: 400px;
    }

    #topmenucontain { display: none; }

    .fmenu { display: none; }

    #clogo { display: none; }

    #youtube1, #youtube2 { display: none; }

    #wrapper {
        margin: 0 1em;
    }

    h1 {
        font-size: 2em;
    }

    #logoimg { display: none; }

    #notification {
    height: 200px;
    margin: 0;
    width: 100%;
    padding-top:20px;
    } 

    .ui-tabs .ui-tabs-nav li a {
    border: 3px solid white;
    color: white;
    }

    #branding {
        width: 100%;
        padding: 1em 0;
        margin: 0;
        text-align: center;
    }

    #topbtn, #topbtn2, #topbtn3 {
    width: 75px;
    }

    #topbtnbuy {
    background: none repeat scroll 0 0 #C6C699;
    border: 1px solid #C6C699;
    color: #333333;
    display: inline;
    float: left;
    font-family: Georgia;
    font-size: 12px;
    height: 42px;
    margin-right: 10px;
    margin-top: -1px;
    width: 25%;
    }

    a.box:link {
    min-width: 70%;
    } 

    nav#access {
    border-bottom: 1px dashed #CFCFCF;
    position: relative;
    text-align: center;
    }

    nav#access ul.menu li:nth-child(n+5) {
    display: none;
    }

    .content {
    min-height: 0;
    background-image: none !important;
    border-bottom: 1px dashed #CFCFCF;
    }

    /* Hide Background & Overlay Images */
    .overlay {
    display: none;
    }

    .has-background {
    min-height: 0;
    }

    .content header, .content .entry-summary, 
    .content .entry-content, .content .edit-link, 
    footer.entry-meta {
    width: 100%;
    }

    .content header, .has-background header {
    margin-top: 2em;
    }

    .content header h2 a, .single .content header h2 {
    font-size: 2em;
    }

    .content section.right, 
    .content section.left,
    .content section.full,
    .content section.center {
        padding: 0;
    }

    .content section.center header, 
    .content section.center .entry-summary, 
    .content section.center .entry-content, 
    .content section.center .edit-link,
    .content section.center footer.entry-meta,
    .content section.right header, 
    .content section.right .entry-summary, 
    .content section.right .entry-content, 
    .content section.right .edit-link,
    .content section.right footer.entry-meta  {
        left: 0;
    }

    #comments {
        margin: 1em 0;
    }

    #comment, #commentform input, 
    #commentform #submit, #commentform #comment {
        width: 416px;
    }

    .commentlist {
        width: 424px;
    }

    #commentform #submit {
        width: 430px;
    }
    #comments, #commentform #comment-reply {
        width: 100%;
    }

    .cat-links, .entry-meta .sep:nth-child(n+4),
    .comments-link, .edit-link {
        display: none;
    }

    /* Footer */
    #footer {
        width: 100%;
        padding: 1em 0;
    }

    #footer-widgets {
        margin-bottom: 1em;
    }

    #footer .widget {
        width: 45%;
        margin: 0.5em 0;
    }

    .third-box {
        width: 89%; 
    }

    #buybutton { width: 95%; }

    .scrolldowntext { margin-top: 40px; }

    #notification {
    background-color: #333333;
    border-bottom: 5px solid #C6C699;
    font-size: 22px;
    height: 200px;
    padding-top: 20px;
    position: absolute;
    width: 100%;
    z-index: 9990;
    }

    #topcaption {
    display: none;
    }

    #logoimg { display: none;}

    #topmenucontain { 
    margin: -33px auto 0;
    width: 50%; }

    a.box:link {
    color: #C6C699;
    display: inline;
    float: left;
    font-family: Georgia;
    font-size: 12px;
    height: 50px;
    margin-right: 10px;
    min-width: 75px;
    }   

    #videoscreenshot { height: 215px; width: 100%; }

    .fancybox-iframe { display: hidden; }

}

Once I left out the additional { at the end of ‘@media only screen and (min-width: 320px) and (max-width: 480px)‘ all my media queries were being read?

Update: Just tried removing all styles within specified above viewport, in attempts to start from scratch properly in case some styles were whatever.
BUT, within starting, I simply am trying to hide the top menu within the viewport. And this is ignored and not rendering for some reason?

/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {


#topvidarea {
    margin-left: 24%;
    margin-right: 20%;
    margin-top: -265px;
    max-width: 400px;
}

#topmenucontain { display: none; }

}

Answer 1

You have no opening bracket in your media query but you do have a closing one:

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

All your other media queries where probably being read because you were not properly closing your first query, and thus the query did not know where to begin and end.