following situation …
/* #media screen and (min-width: 480px) */
#media screen and (min-width: 30em) {
#el { background:red; }
}
/* #media screen and (min-width: 640px) */
#media screen and (min-width: 40em) {
#el { background:none; }
}
So if the viewport is smaller than 480px #el should be red, if the viewport is wider it should have no background-color applied!
Is there some css trick to apply this rule only for min-width: 30em so I don't have to "reset" it in the next mediaquery?
Ideas and thoughts on that?
Thank you in advance!
Try in this way
#media screen and (min-width: 30em) and (max-width: 40em) {
#el { background:red; }
}
example fiddle : http://jsfiddle.net/2ySNu/
If you want the background for #e1 to be red below a certain breakpoint, you should use max-width. If you want to apply styling rules for viewports that a greater than a certain breakpoint - that's when you should use min-width. In your example: #media screen and (min-width: 30em), the background will be red only when the viewport is larger than 30em - once it hits 40em it'll revert back to none (based on your other rule). In order to set the background for viewports smaller than 480px simply use max-width, you don't even have to worry about "resetting" because once the viewport exceeds 480px that rule will not apply.
/* #media screen and (max-width: 480px) */
#media screen and (max-width: 30em) {
#el { background:red; }
}
Just remember, the rules you declare in min-width will apply to viewports that have a width greater than that breakpoint width you specify. Whereas rules declared in max-width will apply to viewports that are less/smaller than the breakpoint width.
Related
So what I have is one with max-width: 992px, another is max-height: 732px and max-width: 992px. What I want is to media screen do something only if both height and width are lower than max.
I have this:
#media screen and (max-height: 753px) and (max-width: 992px){
}
How it should be?
Nvm, just place #media screen inside another.
You can use nested media queries. Something like this
#media (max-width:992px) {
#media (max-height:432px) {
.test-div{
background-color: blue;
}
}
}
Maybe this works well in your case
#media screen and (max-height: 753px) , screen and (max-width: 992px) {
....
....
}
Check Documentation Here
You should use only end in between your height and width property
#media (max-width: 992px) and (max-height: 732px) {
/* CSS stuff */
}
How do i apply styles for differnt screen resolutions
For example: I have a computer with max screen resolution of 1366 X 768
and want to specify css styles only for this resolution .
Css #media rules only take into consideration min-width and max-width of the browser how do i target for specific resolution.
Use the resolution tag i.e. :
#media (resolution: 150dpi) {
p {
color: red;
}
}
More explantations and syntax here: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/resolution
Try this:
#media screen and (min-width: 1366px) and (max-width: 1366px)
and (min-height: 768px) and (max-height: 768px) {
/* style */
}
Use width and height mediaqueries
#media (width: 1366px) and (height: 768px) {
:root { background: yellowgreen; }
}
to match a viewport of 1366x768 px
Codepen example
Anyway it's worth noting that, unless you are in fullscreen mode, that rule won't be applied because the UI of your browser takes some room, so the actual viewport can't be exactly the same of the chosen resolution.
You can try this
#media screen and (min-width: 1500px) and (max-width: 1600px){
/*Your style */
}
The .hide-for-small-only is max-width 0 - 39.9375em
But the .show-for-small-only is at 0em - 40em.
Shouldn't the .hide-for-small-only be 0 -40em since that is the number for .show-for-small-only? Why is there a max-width different between these two queries.
#media screen and (max-width: 39.9375em) {
.hide-for-small-only {
display: none !important; } }
#media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {
display: none !important; } }
This is one of those times where expedient code and comprehensible code are slightly different things.
Foundation's #Media Queries
/* Small only */ #media screen and (max-width: 39.9375em) {}
/* Medium and up */ #media screen and (min-width: 40em) {}
/* Medium only */ #media screen and (min-width: 40em) and (max-width:
63.9375em) {}
/* Large and up */ #media screen and (min-width: 64em) {}
/* Large only */ #media screen and (min-width: 64em) and (max-width:
74.9375em) {}
So when width === 40em, we'd be expecting medium.
The reason that .hide-for-small-only is max-width: 39.9375emis that it is possible for width to exactly equal 39.9375em and for the condition to be true (e.g. hide). So for all width values within the small range this element is hidden by display: none. This is pretty straightforward and easy to read.
Whereas if you want to show the element (.show-for-small-only) for 0 to 39.9375em only, then the first width where you'd want to hide the content would be one pixel over small === 40em (hence min-width: 40em). This is not a media query to say show between x and y, it is to say hide under x and over y.
The most confusing part is really because they are named as though one "hides" and the other "shows"... but actually they BOTH hide, but at different widths.
I assume the max-width: 0em is because the #media query is generated by a SASS mixin and that has to work for all the "only" classes, which would actually need a max-width to define the bottom width, but not so much for small.
I want to change a webpage design if device screen width is greater than 1024px for this I using #media only screen and (min-width: > 1024px){ } but it is not working .
Please tell me what is the solution .
Instead of using Demo
#meida only screen and (min-width: > 1024px){...}
use this
#media screen and (min-width:1024px) {...}
/* styles for browsers larger than 1024px; */
#media screen and (max-width:1024px) {...}
/* styles for browsers less than 1024px; */
}
The current code that you have tried to implement will do the trick, but only if you rectify the syntax errors in it.
So, instead of
#media only screen and (min-width: > 1024px){ }
you could do
#media only screen and (min-width: 1024px){
/* css rules here will apply only if the size of the screen is greater than AND equal to 1024px */
}
Note: #media query values specified for the min-width|max-width will be inclusive of the value itself as well. Meaning that if you want that a particular style apply to an element exactly when the width of the screen is greater than 1024px (and not equal to it), you should change the value to min-width: 1025px.
What should be really simple is not working at all. I just want to set a div to display none until the width is greater than 980px. However it only works while the screen is at 980px but nothing more or less than that!!
/* Should work while screen is 980px or less */
#media (max-width: 980px) {
.large-screen-hide{
display: none;
}
}
I think you need to check for both min-width and max-width.
Try
/* Should work while screen is 980px or less */
#media screen and (min-width: 1px) and (max-width: 980px) {
.large-screen-hide{
display: none;
}
}
From CSS Media Queries on the Mozilla Developer Network.
u need to set the type of media
#media screen and (max-width:980px){
.large-screen-hide {
display:none;
}
}