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.
Related
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.
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
Bootstrap includes some default media queries that look like this:
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
Why don't these include the max-width variable? Is that inherently implied by just using min-width, i.e. does CSS just simply "know" to take the highest min-width possible?
It has to do with logic.
TL;DR: See it as if/else statements in you code. You only add the max if you want a max specified.
You can read it like this:
#Div{ color: green; }
#media (min-width: 992px) {
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width at least 992px ) BG -> pink
If you would have maxwidth it goes with the same logic, only as maximum.
If you have both:
#Div{ color: green; }
#media (min-width: 500px) and (max-width: 992px){
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width atleast 500px AND a maximum of 992px ) BG -> pink
Easy demo for max-width, make something tablet resolution only (asuming everything 1024+ is desktop):
#media (min-width: 1024px) { /* ... */ }
There is a tendency to design for the smaller screen (ie. mobile) first and use media queries to target larger screens (ie. desktop) users. This is what you are seeing in the Bootstrap CSS.
The main stylesheet applies to the mobile browser (in fact all browsers). Then a media query is used to target slightly larger screens to apply specific rules:
#media (min-width: 992px) {
This targets window sizes greater than (or equal to) 992px (ie. whose minimum width is 992px).
There is no max-width specified here, so this applies to all large windows.
I'm finding the concept of the (min-width/max-width) media query a bit confusing.
Naturally if I was to design a media query I would want to say (in pseudo-code)....
if(screen.width < 420)
{
ApplyStyle();
}
This concept of talking about min and max doesn't make any sense since the 'min-width' of something like a div element is a command not a question.
I know that the following is true when my screen goes below 420px...
#media screen and (max-width:420px) {
}
I just don't know why because the max width is something I tell it to have. If I have told it to have something why is css checking it? Surely it already knows it.
I'm perhaps missing the grammer/context here. Can someone please explain?
min-width in media queries is not related to the min-width property you set on elements, those are two different things.
In media queries min-width: X is true if the viewport has a width greater or equal to X, effectively working as screen.width >= X. Obviously max-width would then be equal to screen.width <= X
To me it makes perfect sense, if you read #media screen and (max-width:420px) as a screen with a maximum width of 420px, so anything from 0 to 420px
Here is a simple example, hopefully it helps..
Say we have a website with the following media queries:
/* #1- Large desktop */
#media (min-width: 980px) { ... }
/* #2- Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* #4- Landscape phones and down */
#media (max-width: 480px) { ... }
If the screen size of the browser is 1200px, query #1 will be satisfied, as the minimum width of the browser has to be 980px for this query to be displayed.
Lets say we resize the browser now, and bring it all the way down to 250px.. query #4 is satisfied as the MAX is 480px..
Here is a simple translation of the queries..
#media (min-width: 980px) { ... }
Display if screen is greater than or equal to 980px
#media (min-width: 768px) and (max-width: 979px) { ... }
Display if screen is greater than or equal to 768px and less than or equal to 978px
#media (max-width: 767px) { ... }
Display if screen is greater than 480px and less than or equal to 767px.
#media (max-width: 480px) { ... }
Display if screen is less than or equal to 480px
Using these queries, you will always have a result, as one query is always satisfied.
The confusion here is that there is both a min-width CSS property and media query with the same name:
#media (min-width: 420px) {...} /* This is read-only and is set to screen size */
.element { min-width: 420px; ...} /* This is setting a property of the selected element */
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.