Tablet Break Point Fails in Responsive CSS Fluid Grid Design

Question

Created a responsive site in Dreamweaver CS6 using the Fluid Grid system. All break points initially worked fine, and I had 3 separate layouts for desktop, tablet, and mobile; with different resolutions, each Fluid Grid Layout Div Tag would rearrange on the page into different columns. Every div on the page is set up with width: __%; in the CSS so that they expand and contract with the browser size.

Everything is responsive on the page and works correctly; however, somewhere during development I lost the Tablet break point, in a sense. When the browser reaches the 768px width which should break the page into the Tablet layout, it instead jumps straight to the mobile formatting, which should not happen until 480px .

In Dreamweaver, I can view the formatting I have set for the Tablet layout, in Design mode it will show me the correct layout of columns of DIVs and content; however, once I place DW in Live mode, or preview in a browser, it no longer has the Tablet functionality, just Desktop and Mobile formatting.

I will post the CSS code for the @media queries and the subsequent .gridContainer code - trying to see if a solution could be found without having to post the entire CSS code, as there's quite alot. Please let me know if I need to edit my question and include more code - perhaps the truncated code of a few DIVs and their responsive values for each layout? I'd be happy to post any more information if it will help resolve this issue.

Thank you in advance for any support or advice!

CSS:

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

.gridContainer:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.gridContainer:after {
    clear:both;
}

.gridContainer {
    width: 96%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    border:1px solid #00133e;
    background: #004aa1;
}

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

@media only screen and (min-width: 481px) {

.gridContainer:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.gridContainer:after {
    clear:both;
}

.gridContainer {
    width: 96%;
    padding-left: 1.5%;
    padding-right: 1.5%;
}
}

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

@media only screen and (min-width: 769px) {

.gridContainer:before, .container:after {
    display:table;
    content:"";
    zoom:1 /* ie fix */;
}

.gridContainer:after {
    clear:both;
}

.gridContainer {
    width: 96%;
    padding-left: 1.5%;
    padding-right: 1.5%;
}
}

Answer 1

Assuming, this is copy paste of actual code. In the given CSS, I believe you have have missed one curly braces, which was suppose to close the style for <480 width devices.

background: #004aa1;
} <-- Here one more "}" needed

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

@media only screen and (min-width: 481px) {

.gridContainer:before, .container:after {

Answer 2

Found the solution:

Near the end of my mobile layout CSS style code, there was an extra curly brace. Removed the brace, responsiveness returns.

Very simple solution; thanks to @MrRO for pointing me in the right direction to look!