html - Media Queries Not Being Triggered -
html - Media Queries Not Being Triggered -
i creating responsive site right unfortunately media queries not beingness triggered. have supplied code, copied , pasted as-is document using, below.
does know doing wrong preventing media queries beingness called?
<!doctype html> <!-- utilize 1 when wp goes <html <?php language_attributes(); ?>>!--> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title><?php wp_title( '|', true, 'right' ); ?></title> <!-- icon !--> <link rel="icon" href="images/favicon.png" type="image/png"> <link rel="shortcut icon" href="images/favicon.png" type="image/png" /> <!--<link rel="profile" href="http://gmpg.org/xfn/11" /> !--> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <!-- css --> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen"> <!-- javascript --> <script src="js/jquery-1.10.2.js" type="text/javascript"></script> <script src="js/bootstrap.js" type="text/javascript"></script> </head> <!-- utilize 1 when wp goes <body <?php body_class(); ?>> !--> <body> <!-- header !--> <div id="wrapper"> <!-- navigation --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a href="#"><img src="images/logo.png" width="300" height="131" alt="logo"/></a> </li> <li><a href="#">engagement</a> </li> <li><a href="#">diamonds</a> </li> <li><a href="#">jewelry</a> </li> <li><a href="#">watches</a> </li> <li><hr /></li> <li><a href="#">about</a> </li> <li><a href="#">news & events</a> </li> <li><a href="#">contact</a> <li><hr /></li> <li> insert social media icons here </li> </li> </ul> </div> <!-- end header !--> <!-- content --> <div id="page-content-wrapper"> <!-- maintain page content within page-content inset div! --> <div class="page-content inset"> <div class="row"> <div class="col-md-12"> <p class="lead">lorem ipsum dolor sit down amet, consectetur adipiscing elit. duis consectetur lobortis metus, european union lacinia lorem mollis eu. etiam faucibus in diam sed rhoncus. aliquam aliquam ante, in sollicitudin est. aenean vehicula viverra commodo. nullam malesuada metus odio, id luctus lorem dapibus vel. proin sit down amet leo vel diam pharetra mattis european union sed ante. proin ut metus tellus. pellentesque lorem justo, mollis ut auctor vel, aliquam vel tortor. cras ut lectus mauris. aenean porta @ dolor id imperdiet. donec neque velit, commodo id suscipit et, ultricies et orci. nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p> </div> <div class="col-md-6"> <p class="well">cras ut lectus mauris. aenean porta @ dolor id imperdiet. donec neque velit, commodo id suscipit et, ultricies et orci. nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p> </div> <div class="col-md-6"> <p class="well">cras ut lectus mauris. aenean porta @ dolor id imperdiet. donec neque velit, commodo id suscipit et, ultricies et orci. nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p> </div> <div class="col-md-4"> <p class="well">cras ut lectus mauris. aenean porta @ dolor id imperdiet. donec neque velit, commodo id suscipit et, ultricies et orci. nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p> </div> <div class="col-md-4"> <p class="well">cras ut lectus mauris. aenean porta @ dolor id imperdiet. donec neque velit, commodo id suscipit et, ultricies et orci. nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p> </div> <div class="col-md-4"> <p class="well">cras ut lectus mauris. aenean porta @ dolor id imperdiet. donec neque velit, commodo id suscipit et, ultricies et orci. nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p> </div> </div> </div> </div> </div> </body> </html> css
/* fonts */ @import url('http://fonts.googleapis.com/css?family=droid+sans'); /* global */ @-ms-viewport { width: device-width; } #wrapper { padding-left: 340px; transition: 0.4s ease 0s; } .inset { padding: 20px; } /* navigation */ #sidebar-wrapper { margin-left: -340px; left: 340px; width: 340px; background: #000; position: fixed; height: 100%; overflow-y: auto; z-index: 1000; transition: 0.4s ease 0s; } #page-content-wrapper { width: 100%; } .sidebar-nav { position: absolute; top: 0; width: 340px; list-style: none; margin: 0; padding: 0; } .sidebar-nav li { line-height: 40px; text-indent: 20px; } .sidebar-nav li { color: #999999; display: block; text-decoration: none; } .sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,0.2); text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 131px; line-height: 60px; font-size: 18px; } .sidebar-nav > .sidebar-brand { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } /* responsive fixes */ @media screen (min-width: 1100px) , (max-width: 1279px { } @media screen (min-width: 980px) , (max-width: 1199px) { } @media screen (min-width: 481px) , (max-width: 979px) { #wrapper { padding-left: 0; } #sidebar-wrapper { margin-left: 0; left: 0; width: 100%; height: 230px; } #sidebar-nav { width: 100%; } .inset { padding: 15px; } } @media screen (max-width: 480px) { }
i believe need and between screen , max/min width. first media query missing ending bracket (max-width: 1279px see
http://jsfiddle.net/qm54b
@media screen , (min-width: 100px) , (max-width: 479px) { body {background: green;} } because of missing bracket, rest of media query not triggered
html css twitter-bootstrap responsive-design media-queries
Comments
Post a Comment