mardi 21 avril 2015

Media queries do not work

Im trying to get my sideBar to dissapear when the screen is 800px or less and then make all the content the full width of the page. Ive set the viewport and have tried using !important to overwrite the current styles but still cant seem to get it working. any help would be appreciated.

head:

    <link rel="stylesheet" type="text/css" href="layout1.css"/>

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 nclude width of sidebar */
    border-right: solid 10px #fff;
border-left: solid 10px #fff;

}

my mediaqueries 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>

Aucun commentaire:

Enregistrer un commentaire