Media Queries not working

[khcreativemedia]

I have a site with media queries and none of my queries are working. This is a WordPress site build on the Genesis platform.

Head:

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

CSS with query:

@media only screen
and (min-device-width : 775px)
and (max-device-width : 1024px) {
#header {
float: none;
}

.another_site_inner-wrap {
float: none;
}
}

I'm not sure what else you would need to see to help guide me in the right direction. I'm a bit of a newbie, so please excuse my lack of knowledge.

http://www.hardscapeelements.com/

[Victor Font]

The first thing I see is that your site is built using XHTML. XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. In XHTML, style sheets needed to be declared for either print or screen if you wanted to use media queries:

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

You also have a lot of parse errors found in the W3C Validator: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.hardscapeelements.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

You should really update your theme to HTML5 if you want to provide the best user experience.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts