Media queries do not work

Question

I'm trying to get my .sideBar to disappear when the screen is 800px or less. The styles are working at 480px

I've set the viewport and have tried using !important to display:none; to override the current styles but still cant seem to get it work.

Any help would be appreciated.

EDIT:

no media queries seem to be working, does anybody know why?

JS Fiddle here

seems media queries at max-width:800px are not working...

head:

<link rel="stylesheet" type="text/css" href="layout1.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">

current styling:

.sideBar {
position:fixed;
top:0;
left:0;
background:#C6C;
width:200px;
height:100%;
z-index:999;
margin-left: auto;
margin-right: auto;
left: 0;
right:850px; /* Must include width of sidebar */
border-right: solid 10px #fff;
border-left: solid 10px #fff;
}

my media queries set to 800px;

@media only screen and (max-width: 800px) {
.centre{width:100% !important;}
.visibleArea{width:100% !important;}
.sideBar {display: none !important;}
}

any help would be great

here is my html for the sideBar:

    <!--SIDE BAR-->
<div class="sideBar">
                <div id="logo">
                    <img src="images/logo-big.png" />
                </div>

                 <div id="nav">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Solutions</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

                <div id="newsletter">
                    <h1>NEWSLETTER</h1>  

                <div id='content'>
                    <div id="hidden-content">
                        <span class="signup">Enter your e-mail address to sign up for our monthly newsletter</span> <input class="side-mail" type="text" name="FirstName" placeholder="Email@test.com"><br> 
                        <input type="submit" value="SUBMIT" class="submit-button">
                    </div>
                </div>

                <div id='button'><sctrong><img src="images/more-banner.png"  /></strong></div>

                <script>
                     $("#button").click(function(){
                            $("#content").stop().slideToggle();
                            return false;
                        }); 

                $("#button").hover(function(){
                            $(this).stop().css({"cursor" : "pointer"})
                        });
                </script>

                </div>

                    <div id="barFoot">

                    <p>
                    Paxton House
                </p>

               </div>


</div>

Answer 1

You have an extra closing bracket on line 276. Also just before the media queries, the comments have two forward slashes "//" when it should just have one.

//*=================================================================================*|
                                MEDIA QUERIES                               
=====================================================================================*//

You can read about the correct CSS comment syntax here: https://developer.mozilla.org/en-US/docs/Web/CSS/Comments

I have corrected your comments for you see: https://jsfiddle.net/f370kxya/3/