CODEWITHSUNDEEP
csswordpressmedia-queries
Keith Higginbotham
Keith Higginbotham

Reputation: 53

Why is my media query not working?

Let me start over, as I clearly didn't post my question correctly.

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

Header:

<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.

Upvotes: 1

Views: 590

Answers (3)

drodriguez56
drodriguez56

Reputation: 11

321px is too small try 700px to test it first, if you are trying to change it when you shrink the window then use max-width.

Try changing the border and color of a div on a certain with of the page (best way to test and see the media query in action). the media query should work so the problem is how you are implementing it

Example:

@media only screen and (max-width: 700px){
  div{
   border-color:red;
   border-width: 10px;
   border-style: solid;
  }
}

Read this and play with different querys : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Upvotes: 1

webalissoncs
webalissoncs

Reputation: 99

Set this at your <head>

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 0

Anthony Carbon
Anthony Carbon

Reputation: 618

OPTION 1

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

OPTION 2

@media only screen and (max-width: 1024px) {
        #header, .another_site_inner-wrap {
            float: none;
        }
}

If you want the #header, .another_site_inner-wrap to float: none; in 1024px You don't need to re-declare the same CSS on 775px. All CSS under 1024px will be used from 1024px below.

Upvotes: 1

Related Questions