#media screen and (min-width: 799px) and (max-width: 800px) {
}
I have a website whose resolution is 800x600 and another 800x400. The width is always the same, but not the height. How can I make the height of the page 600 in one and 400 in another?
You can use max-height in media queries to make a website responsive for height
1 use comma for different rule
#media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
2.using and
#media screen and (max-width: 995px)and (max-height: 700px) {
...
}
you can assign different hight with this code
#media (min-height: 400px) and (max-height: 600px) and (min-width: 799px) and (max-width: 800px) { ... }
I am adding some (#media) entries to make my website responsive, which works fine in Chrome.
However, in IE/Safari when I shrink it to the minimum width (<475px) it displays the old default with no mobile media settings displayed. All the other widths(476-1040) display fine.
My media settings are:
#media (min-width: 768px) and (max-width: 1040px){
#media only screen and (max-width: 475px){
#media (min-width: 476px) and (max-width: 575px){
#media (min-width: 576px) and (max-width: 675px){
#media (min-width: 676px) and (max-width: 767px){
#media (min-width: 768px) and (max-width: 1040px){
I have no webkit/moz etc settings added for any of the entries.
Fixed, there was a #media query for that size further down that was causing an overide.
I have looked at similar questions here and did not find a suitable answer, so forgive me that this question may appear at first to be a duplicate of others here.
My screen resolution is 1366px wide
I have default styles, and then several media queries at the end of the stylesheet, in the following order:
#media only screen and (max-width:1920px) {
}
#media only screen and (max-width:1680px), only screen and (max-device-width: 1680px) {
}
#media only screen and (max-width:1280px), only screen and (max-device-width: 1280px) {
}
#media only screen and (max-width:1024px), only screen and (max-device-width: 1024px) {
}
#media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
On my machine, the styles from the very first media query (max-width: 1920px) are being applied. When I inspect in Firebug, it gives me the line # coinciding with a declaration within that first media query.
This is happening across several browsers (Firefox, Chrome)
But, my viewport is just 1366px wide - so, I would expect either max-width:1280px or max-width:1680px to match, and not 1920px.
When I resize to 1024x768, or 800x600, the correct media query styles are applied.
What am I doing wrong?
I've looked for any missing bracket closures and found none. I've validated using the W3C CSS validator service, and checked as Correct, no errors found.
The issue is your logic.
Your first query states max-width: 1920px. Indeed, because your desktop is at 1366px, it is smaller than 1920px, so it is a valid query. Consider this a catch all after your 1680px.
I would suggest re-ordering and starting with smallest, most constraining queries first:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
#media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}
#media only screen and (max-width:1024px), only screen and (max-device-width: 1024px) {
}
#media only screen and (max-width:1280px), only screen and (max-device-width: 1280px) {
}
#media only screen and (max-width:1680px), only screen and (max-device-width: 1680px) {
}
#media only screen and (max-width:1920px) {
}
An even better approach would be to use min-width for all of your queries:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}
#media only screen and (min-width: 800px), only screen and (min-device-width: 800px) {
}
#media only screen and (min-width:1024px), only screen and (min-device-width: 1024px) {
}
#media only screen and (min-width:1280px), only screen and (min-device-width: 1280px) {
}
#media only screen and (min-width:1680px), only screen and (min-device-width: 1680px) {
}
#media only screen and (min-width:1920px) {
}
As a best practice, here is Bootstraps queries:
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
You want to use min-width not max-width. Since you're query is applying to any screen up to 1920px wide, it is always being applied when your screen is no larger than 1366px wide. max-width == <=, min-width == >=.
/* apply these selectors when the width is equal to or greater than 1920px */
#media only screen and (min-width:1920px) {
}
What is the correct way of using media queries.
Is it method
A.)
#media (max-width: 992px){
something here
}
Or method
B.)
#media (min-width: 442px) and (max-width: 992px)
Both your examples are valid, but they are different.
#media (max-width: 992px){ The screen is narrower than 992px.
#media (min-width: 442px) and (max-width: 992px){ The screen is wider than 442px, and narrower than 992px.
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.