CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Dan Cundy
Dan Cundy

Reputation: 2849

Why isn't my tablet media query activating?

Problem

I have three media queries, one for Mobile, Tablet and Desktop screen sizes. All were working fine, until i must have done something that has stopped the Tablet media query from working/activating?

I know its not working as navigation menu is set to display differently from the other two queries.

Each should be displayed as picture below.

Phone

enter image description here

Tablet

enter image description here

Desktop

enter image description here

What actually happens?

Upon resizing browser window the tablet media query is skipped, switching straight to the mobile query from the desktop.

Live Example

My Testing Server

My HTML

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.css" rel="stylesheet" type="text/css">
<!-- 
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div id="title">
  <h1>Bass Clef Photography</h1>
</div>
<div id="tagline">Passion 4 Live Music &amp; Passion 4 Photography</div>
<div id="tabsContainer">
<div id="centerContainer">
 <div class='tab zero'>
      <ul>
        <li><a href="BassClef.html">Home</a></li>
      </ul>
  </div>
    <div class='tab one'>
      <ul>
        <li><a href="#">Music Gallery</a></li>
      </ul>
    </div>
    <div class='tab two'>
      <ul>
        <li><a href="#">About</a></li>
      </ul>
    </div>
    <div class='tab three'>
      <ul>
        <li><a href="#">Clients</a></li>
      </ul>
    </div>
    <div class='tab four'>
      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class='tab five'>
      <ul>
        <li><a href="members.php">Members</a></li>
      </ul>
    </div>
</div>
</div>

</body>
</html>

My CSS

   @charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width: 100%;
}
body {
    width: 100%;
}
/*
    Dreamweaver Fluid Grid Properties
    ----------------------------------
    dw-num-cols-mobile:     5;
    dw-num-cols-tablet:     8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:   25;

    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design

    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

#tabsContainer {
    clear: both;
    display: block;
    width: auto;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    width: 100%;
    height: auto;
}
#centerContainer {
    width: 230px;
    height: 280px;
    clear: none;
    display: block;
    margin: 0 auto;
}
#tabsContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 24px;
}
#tabsContainer ul li {
    display: inline;
    margin: 0px;
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
}
#tabsContainer ul li a {
    display: block;
    float: left;
    padding: 17px 15px 0 15px;
    font: bold 12px Arial;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    width: 200px;
}
#tabsContainer ul li a:hover {
    color: #d3701e;
    font-size: 24px;
}
#tabsContainer ul li #active a {
    color: #d3701e;
    background: url(images/navigation-hover.png) repeat-x left top;
}
.tab {
    float: left;
    font-size: 24px;
    clear: both;
}
.tab.one {
    width: 220px auto;
    font-size: 24px;
    white-space: nowrap;
}
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#title {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    font-size: xx-large;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}
#tagline {
    clear: both;
    float: left;
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    display: block;
    font-size: x-large;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    color: #d3701e;
}
}



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */


@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#title {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
}
#tagline {
    clear: both;
    float: left;
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
}
#tabsContainer {
    float: left;
    width: 100%;
    display: block;
}
#centerContainer {
    width: 460px;
    height: 150px;
    clear: none;
    display: block;
    margin: 0 auto;
}
#tabsContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 24px;
}
#tabsContainer ul li {
    display: inline;
    margin: 0px;
    display: block;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
}
#tabsContainer ul li a {
    display: block;
    float: left;
    padding: 17px 15px 0 15px;
    font: bold 12px Arial;
    color: #000;
    text-decoration: none;
    font-size: 24px;
}
#tabsContainer ul li a:hover {
    color: #d3701e;
    font-size: 24px;
}
#tabsContainer ul li #active a {
    color: #d3701e;
    background: url(images/navigation-hover.png) repeat-x left top;
}
.tab {
    float: left;
    font-size: 24px;
    clear: none;
}
.tab.one {
    width: 220px auto;
    font-size: 24px;
}
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#title {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: left;
}
#tagline {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: left;
}
#tabsContainer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#centerContainer {
    width: 100%;
    height: 100px;
    clear: none;
    display: block;
    margin: 0 auto;
}
#tabsContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 24px;
}
#tabsContainer ul li {
    display: inline;
    margin: 0px;
    display: block;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
}
#tabsContainer ul li a {
    display: block;
    float: left;
    padding: 17px 15px 0 15px;
    font: bold 12px Arial;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    width: auto;
}
#tabsContainer ul li a:hover {
    color: #d3701e;
    font-size: 24px;
}
#tabsContainer ul li #active a {
    color: #d3701e;
    background: url(images/navigation-hover.png) repeat-x left top;
}
.tab {
    float: left;
    font-size: 24px;
    clear: none;
}
.tab.one {
    width: 190px;
    font-size: 24px;
    white-space: nowrap;
}
}

Any help or pointers to the right direction would be greatly appreciated. This is my first attempt at a "responsive" Website so i'm guessing i may have made some mistakes.

Upvotes: 0

Views: 188

Answers (1)

TheLawrence
TheLawrence

Reputation: 347

You have an extra curly brace at the end of your mobile layout styles. After #tagline. Remove that and it should be good.

Upvotes: 5

Related Questions