I have this media query css: somehow it just won't pass validation, but if I take out the orientation queries, it will validate successfully. I simply cannot find anything wrong with it. all curly brackets are balanced,what could be wrong?
/* media query---MOB */
#media screen and (min-width:200px) and (max-width: 640px) {
/* ....CSS classes.... */
#media only screen and (orientation: landscape) {
.loginImgDiv {
margin-left: 70%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: landscape)*/
#media only screen and (orientation: portrait) {
.loginImgDiv {
margin-left: 45%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: portrait)*/
} /*End of media query---MOB */
I think you have to separate out both orientations you cannot mix them
check this link orientation reference
change it to the following
#media screen and (min-width:200px) and (max-width: 640px) and (orientation:landscape){
/* ....CSS classes.... */
.loginImgDiv {
margin-left: 70%;
width:100%;
height:auto;
}
}
#media screen and (min-width:200px) and (max-width: 640px) and (orientation:potrait){
.loginImgDiv{
margin-left: 45%;
width:100%;
height:auto;
}
} /* End of #media only screen and (orientation: portrait)*/
/*End of media query---MOB */
Hope it helps
Related
My goal is to resolve site-content overlapping the background slider (Plugin) in WordPress. Below the media queries are conflicting between device. If it works on Mobile devices then it creates an issue on ipads or any landscape mode.
Here is my CSS media queries.
/*------ MEDIA QUERIES------ */
/* Iphone 6,7 Portrait */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
.HomePageBody {
margin-top: -970px !important;
}
.nivoSlider {
top: 40px;
/* position:absolute; */
min-height: 500px !important;
width: 100%;
overflow: hidden;
}
/* .site-content {
margin-top:-320px
} */
}
/* Iphone 6,7 Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.HomePageBody {
margin-top: -110px !important;
}
.nivoSlider {
top: 40px;
/* position:absolute; */
min-height: 500px !important;
width: 100%;
overflow: hidden;
}
.site-content {
margin-top: -320px !important;
}
}
Since min/max-device-width has deprecated, you can use the orientation queries for portrait and landscape.
So your code will be like that:
#media (orientation: landscape) {
...
}
#media (orientation: portrait) {
...
}
I am applying this`
#media screen and (max-width: 800px OR max-height: 600px) {
...
}
It's comma separated
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
I need to resize and hide an element based on certain conditions, but I can't get it right.
Pseduo code:
If height is less than or equal to 400px : hide
If height is between 401-600 : do x
If height is greater than or equal to 601px : do y
I'm doing this:
#media only screen and (max-height: 400px) {
/* hide */
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
/* do X */
}
#media only screen and (max-height: 601px) {
/* do Y */
}
...but it always defaults to the last condition: do Y
Your last condition should be min-height and not max-height. also does not need to set and (max-height: 600px) because the following MQ will match anyway
http://jsfiddle.net/rnrlabs/3r382qts/
#media only screen and (max-height: 100px) {
.condition {
display: none;
visibility: hidden;
}
}
#media only screen and (min-height: 101px) {
.condition {
color: red;
}
}
#media only screen and (min-height: 301px) {
.condition {
color: blue;
}
}
#media only screen and (max-height: 601px) {
should be
#media only screen and (min-height: 601px) {
Because you want "If height is greater than or equal to 601px : do y" but max-height would set the maximum height.
Your last condition should be min-height and not max-height:
#media only screen and (max-height: 400px) {
/* hide */
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
/* do X */
}
#media only screen and (min-height: 601px) {
/* do Y */
}
#media only screen and (max-height: 400px) {
.Submenu {display:none !important;}
}
#media only screen and (min-height: 401px) and (max-height: 600px) {
.Submenu {display:block;}
}
#media only screen and (min-height: 601px) {
.Submenu {display:inline-block !important;}
}
I am using some media queries for responsive versions, but with the smallest screen media query it breaks the whole code.
This is the structure of my media query!
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
With the above structure, the 3rd one media query isn't good at all.
I wrote following code in my style sheet with 3rd one media query.
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title {
font-size: 25px !important;
line-height: 25px;
}
}
And this code is making title of all versions into font-size 25.
Why is this not specific only for small screens and why it's taking effect on all versions?
And also, should I use "!important" on all versions for all classes?
like:
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
.module-title: 30px !important;
}
}
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title: 30px !important;
}
}
Any idea?
Remove the !important from the non-responsive class. and make sure you're closing media queries properly.
Example:
#media (max-width: 300px {
/*styles goes here*/
.tag {
} This is tag closing
} this is query closing
This syntax is very wrong:
/* Landscape phone to portrait tablet */*1
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
...because you can't just give a property to a selector!
The *1 after the comment above the code is outside the comment.
So the problem is that and the double braces. The !important below would only break other query if any of the conditions were met in other media-queries (only screen, min-width: 321px or max-width: 479).
#media only screen and (min-width: 321px) and (max-width: 479px) {
.module-title { font-size: 27px !important; }
}
It would not influence the media-query below, for instance:
#media only print and (min-width: 480px) {
.module-title { font-size: 27px; }
}
The syntax above would be the correct one.