Media query working at wrong time and not working

HTML & CSS
1

So, I’ve added two media queries. I can get the first one to work (1040 px for margin-right:.8em;) and the second one appears to working at the wrong pixel width? It appears to work at about 714px vs 769. I’ve looked at this for the past hour and I’m just stumped so any help would be appreciated. thx

http://dev.newstartlaw.clients.blinkss.com/

@media only screen and (max-width:1040px) {
#menu-main-menu li a {
    color: #FFF;
    text-decoration: none;
    margin-right: .8em;
    padding: 0.5em;
}

}


@media only screen and (max-width:769px) {
 
 .menu-main-menu-container {
 
    overflow: hidden;
}



#menu-main-menu li a, #menu-main-menu li a:hover{
    display: block !important;
    font-size: 0.9em;
    background-color: #700008;
    margin-bottom: 1em;
    padding: 1em;
    float: left;
    overflow: hidden;
    margin-right: 1em;
    color: #FFF;
}


}
2

Could you be a little more specific about what the issue is? The styles in the first block with apply at any width below 1040px unless you override them in another media query.

Don’t forget to wrap your code in code tags, too. :wink:

3

I can’t get the media query at 1040px to work. For some reason the margin-right: .8em; is not being applied below 1040 pixels.

For the 769px media query for some reason it’s not being applied until about 715 pixels. If you resize the brower to about 710px then you will see the main navigation links have red backgrounds.

I feel like it is being overriden somewhere, but when I inspect the elements between about 715 pixels to 769 pixels I only see this css


#menu-main-menu li a, #menu-spanish-main-nav-menu li a {
    color: #FFF;
    text-decoration: none;
    margin-right: 1.5em;
    padding: 0.5em;
}

thanks

4

OK, the next step might be to check the style sheet for any errors that might be disabling the @media rules: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdev.newstartlaw.clients.blinkss.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

5

Hi,

The media query isn’t working because you missed a closing bracket here between 2 media queries:


 @media only screen and (max-width:733px) {
#TopHead { padding:0em -1em; }
#PhoneSection ul li {
	font-size:.6em;
	line-height:3.5em;
	margin-left:0;
}
#cat.postform {
	margin-top:1em;
	margin-bottom:1em;
	display:block;
	height:3em;
}
.LeftInfo {
	margin-right:2em;
	padding-bottom:4em;
}
.RightPosts { width:90%; }
#column1, #column2, #column3 { height:15em; }

[B]} /* this bracket was missing */[/B]

 @media only screen and (max-width:480px) {
 #HeadLogo {
 width:100%;
}

Putting that back in will make the page work although tyou should address some of the issues that Ralph pointed to. You can ingnore the IE filter error messages but things like this:


.google-maps {
	position: relative;
	padding-bottom: 75%;
[B]// This is the aspect ratio height: 0;[/B]
	overflow: hidden;
}

Those are js comments and not css comments and will break the rule and possible the rule following.

You also have logic errors where you have used negative padding but there is no such thing as negative padding :slight_smile:

6

Thanks guys. I’d be lost on some things without Sitepoint. So I actually tried using

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdev.newstartlaw.clients.blinkss.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

before this link was posted. However, I could not find the error. Is it shown on here? I should say that the error is now fixed on the live site and not on the dev site.

thx

7

Yes at line 1876.

1876 Parse Error }

It takes a bit of practice but you can soon work out what’s going on if you go through the results a step at a time. Where you are using hacks that throw an error you can either comment them out when testing or just ignore the error when you know its not affecting anything. Fix one error and then validate again as sometimes fixing the first error will clean up the results as there are often knock on effects.