Media Query Not Responding Below (max-width: 568px) - css

Question

I'm new to using media queries, and I've got some working but others aren't (and I can't explain why!) First of all, the site in question is at http://thermal-lab.com. I'm trying to have the logos in the top grey banner resize once below 700px width (which is working) and then resize again at 515px width (which is working).
BUT, I also wanted to double the height of the grey footer bar (called second-footer) at 700px, which isn't working. Any help would be very much appreciated!
This is the relevant CSS:
.second-footer {
width:100%;
height:35px;
position:fixed;
bottom:90px;
left:0;
background:#f6f6f6;
border-top:1px solid #c6c6c6;
border-bottom:1px solid #c6c6c6;
}
.second-footer-wrapper span {
display: inline-block;
}
.second-footer-wrapper {
max-width: 980px;
height: 35px;
margin:0 auto;
padding:0 12px;
}
.second-footer-font {
}
.second-footer-wrapper .left {
position: relative;
float: left;
}
.second-footer-wrapper .right {
position: relative;
float: right;
}
This is the code in my media query for 700px:
#media screen and (max-width: 700px) {
.wrapper .ut {
width:185px;
padding-top:4px;
}
.wrapper .csd {
width:65px;
padding-top:3px;
}
.wrapper .utsoa {
width:186px;
padding-top:2px;
}
.second-footer {
height:70px;
}
.second-footer-wrapper {
height: 70px;
}
}

Answer 1

So with what you have provided for code. The first thing I could suggest would be to make sure that all of the .second-footer css is inside the media query brackets. like so:
#media screen and (max-width: 700px) {
/* SECOND FOOTER */
.second-footer {
width:100%;
height:35px;
position:fixed;
bottom:90px;
left:0;
background:#f6f6f6;
border-top:1px solid #c6c6c6;
border-bottom:1px solid #c6c6c6;
}
.second-footer-wrapper span {
display: inline-block;
}
.second-footer-wrapper {
max-width: 980px;
height: 35px;
margin:0 auto;
padding:0 12px;
}
.second-footer-font {
}
.second-footer-wrapper .left {
position: relative;
float: left;
}
.second-footer-wrapper .right {
position: relative;
float: right;
}
/* OTHER STUFF */
.wrapper .ut {
width:185px;
padding-top:4px;
}
.wrapper .csd {
width:65px;
padding-top:3px;
}
.wrapper .utsoa {
width:186px;
padding-top:2px;
}
.second-footer {
height:70px;
}
.second-footer-wrapper {
height: 70px;
}
}
please try that. Also I did not account for any CSS that will overwrite itself. The height would never reach 35px in this example.
.second-footer {
width:100%;
height:35px;
position:fixed;
bottom:90px;
left:0;
background:#f6f6f6;
border-top:1px solid #c6c6c6;
border-bottom:1px solid #c6c6c6;
}
.second-footer {
height:70px;
}

Answer 2

This is all about selector strength and specificity. A rule being defined within a media query does not give it greater specificity. Since your media query stylesheet appears earlier in the document, it has lower specificity.
Here are two ways you can correct that:
Move your media query stylesheets later in the document.
Increase the specificity of the selectors in your media query rules.
This can be as simple as changing the selector for the media query rules to any of the following:
html .second-footer
div.second-footer
* .second-footer
Give a man a fish vs Teach a man to fish
This problem was simple to solve. Here's how I did it:
Open thermal-lab.com in a browser with a width less than 700px.
Hit F12 to open up developer tools. This works in any browser except FireFox without FireBug. F12 opens FireBug, but you have to install that separately. To open FireFox's built-in developer tools, use the menu.
Locate the element in source whose style is not being applied as expected.
Look at the style inspector for that element.
Notice that the height definition in the media query rule has been struck? This tells you that the element did match the rule, but a rule with greater specificity also defined height. Notice the default rule lists height as well. The lack of strikethrough tells us that this is the rule that was applied.
Both rules have the same selector. The tie breaker for rule specificity is document order. Rules appearing later in the document have higher specificity.