Reputation: 53
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
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
Reputation: 99
Set this at your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Upvotes: 0
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