I have a media query for a website which depends on the width of the viewing window:
#media (max-width: 600px) {
...
}
This works perfectly.
I found that there was an issue with the site menu being cut off on certain devices because the height of the viewing window was not taken into account in the above statement, so I adjusted the statement accordingly (the menu is usually vertical but with the small screen or small height the menu should be changed to being horizontal) :
#media (max-width: 600px), (max-height: 400px){
...
}
However this does not work, the max-width value works but if I resize my window (Firefox and Chrome) to a letterbox size (<400px) then it doesn't run the corresponding height rules contained in the media query.
I have also played with variations such as :
#media all and (max-width: 600px), all and (max-height: 400px){
...
}
But with no success.
I have read various articles about CSS height but I can't see why my rules above are not applying? Any answers?
Tried
#media (max-width: 600px) and (max-height: 400px) {
body {
background:#000;
}
}
and worked fine!
UPDATE: the OR worked too http://jsfiddle.net/noj3u3xn/
#media (max-width: 600px), (max-height: 300px) {
body {
background:#000;
}
}
Maybe you can share more of your css?
The issue appears to be solved when applying the opposite query to all other media query cases:
such as all OTHER media queries need to have a and (min-height: 401px) appended to each of their cases, so they do not overwrite the case above.
cheers
Related
I am trying to manipulate the view when the screen is less than 600px.
for some reason, it does not work for this width, it only works for higher width.
*For testing purposes when the screen is less than 600px I am trying to hide the entire body.
Here is my code:
https://codepen.io/eyalankri/pen/qzbdVm
if you change this:
#media (max-width: 600px) {
body{display: none}
}
To This:
#media (max-width: 1000px) {
body{display: none}
}
It will work.
Can someone help me understand why it does not work for 600px ?
Thanks.
I have 4 media queries in this order in my CSS:
#media screen and (max-width: 599px)
#media screen and (min-width:600px) and (max-width: 895px)
#media screen and (min-width: 896px) and (max-width: 1019px)
#media screen and (min-width: 1020px)
They work mostly, except for when I try to change flex-direction. I have this class above the media queries:
.home-mod4-founders {
display:flex;
align-items:stretch;
}
And this under the smallest media query:
#media screen and (max-width: 599px) {
.home-mod4-founders {
flex-direction:column;
}
}
For some reason, when the screen is under 599px, it takes on the value of one of the other 3 queries:
.home-mod4-founders {
flex-direction:row;
}
When I checked the page with Chrome's dev tools, it seemed to strip out the media query part of the largest one so that it overrides the 599px media query:
screenshot
The live site is here: www.whisperlodge.nyc
And I copy-pasted the CSS and HTML into a codepen http://codepen.io/chillinkwa/pen/MJZVEj
I managed to solve the issue by deleting the class from that largest media query. As the same specifications exist in the one below that, they somehow still seem to apply at a large browser width.
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)
{
}
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.