Basically i am trying to block some styles for a particular width range(240px to 480px). Between this range, i do not want certain styles to get rendered.
To be more clear:
I want color:#000 for all other device widths except for the width->240px to 480px. How i can i make use of media not all queries. Hope i am clear..:(
Is this the correct syntax :
I have :
#media not all and (min-width: 240px) and (max-width: 480px), not all and (min-device-width: 240px) and (max-device-width: 480px) {
What im trying :
#media not all and( (min-width: 240px and max-width: 480px )and (min-device-width: 240px and max-device-width: 480px) ){
Can i combine the two :
#media not all and (min-width: 240px and max-width: 480px) {}
#media not all and (min-device-width: 240px and max-device-width: 480px) {}
Any help is appreciated
What you originally have is the correct syntax. The others are invalid.
The not in each media query negates the media query itself, so if the browser matched a certain media query, then not means it has to ignore that #media rule. If the browser doesn't match the media query, then not means it has to apply the rule.
When you combine two or more not media queries in a single rule, at least one of them has to evaluate to true (or "not false") in order to use the rule.
If you are trying to not all the tests at once, then you need to link them all using and:
#media not all and (min-width: 240px) and (max-width: 480px) and (min-device-width: 240px) and (max-device-width: 480px)
But depending on the devices you're testing with this may or may not make sense.
Related
I have like 16 media queries or something and i noticed that if i put every media query portrait 1 different color some are falling under another media query. For instance i have:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
and i have for instance:
#media only screen and (min-device-width: 320px) and
(max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {}
Then both backgrounds are red but i put the second background on purple. I am referring to my own website www.gester.nl. Can someone help me and see into the website with media query code why some media queries are not working like they are supposed to work. Is it that i use a wrong order or something? I just use google f12 to see how it looks on other devices.
Your media queries are overlapping. You will want to use something like the below to target specific screen sizes:
#media only screen and (min-width: 320px) and (max-width: 480px) {
// do stuff between 320px and 480px
}
#media only screen and (min-width: 481px) and (max-width: 568px) {
// do stuff between 481px and 568px
}
I am really confused as to what the Media Query breakpoints should be. The way I am use to doing it is having one pixel less than the next break point, for instance
#media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx
#media screen and (min-width: 750px) and (max-width: 969px) {}
etc.
But some people use the exact values such as
#media screen and (max-width: 750px) {}
#media screen and (min-width: 750px) and (max-width: 970px) {}
Wouldn't the second approach break it? My understanding is the first approach is the way to go.
And what about if you do something such as
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
And I want all the mobile designs to apply to 750, but at 750 is where the tablet view starts. Same for 970. In this case would having it also one pixel less be correct? I.e max-width: 749 and max-width: 969
Yes, the first one is correct. In the second one, if the screens is exactly 750px wide, both media query sections will apply, which can cause problems.
Concerning your addition:
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
In this case the rules in the second query will overwrite those with identical CSS selectors in the first one, which will probably also cause problems.
The usual way would either be the other way round (desktop first approach), or using a mobile-first approach where you first state the general rules for mobile sizes, and then add media queries for larger sizes which overwrite the general rules. That would for example be
#media screen and (min-width: 720px) {}
#media screen and (min-width: 1280px) {}
Been doing media Queries for Iframe. This two media queries below works fine for iframe when editing the Height and width
min-device-width: 768px) and(max-device-width: 1024px)
min-device-width: 600px) and (max-device-width: 960px)
However when queries on htc phone it does not do anything with its size..
min-device-width: 360px)and (max-device-width: 640px)
Here is my code
#media screen and (min-width: 360px) and (max-width: 640px),(min-device-width: 360px)and
(max-device-width: 640px) and (orientation : landscape)
{
/* CSS */
.wrap{
width:75%;
}
.iframe {
max-height:30vh;
max-width:30%;
}
.html{
background-color:red;
}
}
even the background colors not working when try to do a troubleshooting
It might be due to the device high-resolution, and thus queries never get triggered. Try specifying the resolution units on your media queries.
Otherwise just use min-height and min-width media queries. They're more reliable.
I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.
I need to set my site on desktop (1024 * 768) and ipad, but I can not separate his Vizualization.
I'm using in Ipad:
# media only screen and (min-device-width: 768px) and (max-device-width : 1010px)
and desktop:
# media (min-width: 1020px)
its Works in Firefox, but not Chrome.
Rather than trying to target specific devices, it's arguably better to set appropriate breakpoints specific to your layout. That is, gradually narrow your browser and observe the points at which this particular design needs to reflow. Then set styles that apply to those points, and let each device receive whatever layout works best within its dimensions.
So, in the head of your page, I recommend you place this:
<meta name="viewport" content="width=device-width">
and then in your style sheet, use something like this (the numbers are arbitrary):
/* default styles, perhaps for basic mobiles and older browsers */
/* end default styles */
#media only screen and (min-width: 1025px) { }
#media only screen and (min-width: 701px) and (max-width: 1024px) { }
#media only screen and (max-width: 700px) { }
#media only screen and (min-width: 320px) and (max-width: 480px) { }
There are so many combinations of this that the above is just a rough example. You don't always need max and/or min. It depends on the layout.
There's also an argument for using ems instead of px, but I won't go there for now. :)
Why not just cascade down?
#media screen and (max-width : 1024px){ /*Styles*/ }
#media screen and (max-device-width : 768px){ /*Styles*/ }
1024x768 is iPad size anyway.