media queries not detected

[tiki16]

Hi I have been making some changes to media queries. I am changing some of the breakpoints but when I resize chrome and can see the width in pixels, the media queries don't activate for that resolution. When check in chrome dev tools I can see that the original styles are still in place. Is chrome dev tools accurate displaying the resolution dimensions in the top right? thanks
Here is my css:

@media only screen and (max-width: 1300px) {

.site-inner .content {
width:60%;
}
}

@media only screen and (max-width: 920px) {
.site-header .genesis-nav-menu {
margin-right: 20%;
}

}

http://staging.pixelstew.net/wickedtenants/about/

[Brad Dalton]

Where are you placing the CSS in your file? Before or after the default CSS for Media Queries?

Also, did you clear all types of caching.

---

Tutorials for StudioPress Themes.

[tiki16]

I have it inline with the other media queries. I think it may be that my css notation is incorrect.

[tiki16]

I changed the background color to blue when content width is at 1300px w. I can see this happen but when using google dev tool it shows the browser width as 1170px wide, so something is amiss?

[tiki16]

I tested it with Firefox dev tools and used ruler. It appears to be more accurate with measuring page width than chrome. Where as, Chrome showed it as 1300pw wide FF ruler was more accurate at 1470px wide so I adjusted my media queries accordingly. What a headache.

[Author]

Posts