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 */
Related
I've been stuck on the following problem for a while now.
#media screen and (min-width: 414px) and (max-width: 600px) {
/* appropriate code */
}
#media screen and (min-width: 601px) and (max-width: 767px) {
/* appropriate code */
}
The issue I have is that when a screen is on the specific width of 767px, no styling is applied. What really confuses me is that on the other hand the specific width of 600px does work, while both are the max-width value of their respective media query. I have had this issue with other similar media queries but decided to simply provide you with those two to make my problem clear. I have tried out several things (verifying zoom value of browser, trying on different browser) but it doesn't seem to work. At first I thought it might be a bug but it's a recuring problem. Do any of you have an idea as to what might be the problem?
It's working correctly on my side. But for more accuracy, you can use decimal values like so.
/* 414 -> 413.7 600 -> 600.3 */
#media screen and (min-width: 413.7px) and (max-width: 600.3px) {
div {
color: red;
}
}
/* 601 -> 600.7 767 -> 767.3 */
#media screen and (min-width: 600.7px) and (max-width: 767.3px) {
div {
color: blue;
}
}
<div>Hello</div>
When min-width is used, it means the lowest width and styles are set for the higher width
When max-width is used, it means the maximum width and styles are set for the width less than that
When both are used, styles are applied when the width between the values is entered
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.
Below are the media queries i have figured out and i will use as default for every project that i will do.
#media only screen and (min-width : 320px) {}
#media only screen and (min-width : 480px) {}
#media only screen and (min-width : 768px) {}
#media only screen and (min-width : 992px) {}
#media only screen and (min-width : 1200px) {}
Now, the problem i am facing with them is that when i try to change something on 768 it gets changed on 320 also. I want to change for example logo if i hide it on 768 it should only be invisible on 768 only, whereas in this case i have to manually go on each and every query and make it visible.
I have tried min-width also and max-width also.
And min-width for mobile size and max-width for big sizes but with no luck.
And if i use fixed queries then also i have to write code for every query.
So, how do i make it work only for single size and does not affect the others, and most importantly not to write code for every size.
#media screen and (min-width: 480px) and (max-width: 767px) {
// applied only between 767 px and 480px
}
It will, To avoid that you need to write specific for all the resolutions below to that. For example: If you are hiding logo in 768 then it affects 480, 320,. To get rid of that you need to write in 480, that the specific logo to be visible, so that it will be reflected in 320 too.
/* #### CSS that's applied when the viewing area's width is 768px or less #### */
#media screen and (max-width: 768px){
div#logo{
display: none;
}
}
For logo to be visible in 480 and 320 try like this:
#media screen and (max-width: 480){
div#logo{
display: none;
}
}
For more info, Reference link
I'm trying to make my website design responsive.
So far, I've got the following rules:
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
For some reason, the last media query doesn't work. In fact, it completely strips all styles from every element on the page.
I've been looking around and I can't find any hint as to why this is or what I'm doing wrong...
I feel like I'm missing a concept or something... Everyone's talking to me about percentages, and while I'm taking that on board, I'm not seeing how it relates to the media queries not applying the style rules.
Can anyone provide any clarity?
Thanks in advance!
You don't have a closing comment tag.
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
Nothing else wrong here.