I´m using the following in css:
#media screen and (max-width: 400px){
.details-container {width: 121%;}
}
#media screen and (max-width: 640px){
.details-container {width: 201%;}
}
If i try a resolution under 400px, it takes the 640px css as reference, why?
A screen of 400px fits inside both your queries, that means it will get both values but the last one set will prevail per CSS cascading rules.
You can flip the order of the queries or specify a min-width in the second one
#media screen and (max-width: 400px){
.details-container {width: 121%;}
}
#media screen and (min-width: 401px) and (max-width: 640px){
.details-container {width: 201%;}
}
Related
#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) { ... }
Is there a way to set CSS by #media for one specific resolution only? Not from-to px, but only for one specific number. This doesn't work:
#media (min-width: 767px) and (max-width: 767px) {
#sp-logo {width: 33.33333333%;}
}
Neither works this:
#media (width: 767px) {
#sp-logo {width: 33.33333333%;}
}
When I cover two or more pixels, it suddenly works. But that's not what I need. Example:
#media (min-width: 767px) and (max-width: 768px) {
#sp-logo {width: 33.33333333%;}
}
Your first code snippet works fine with every other number of pixels. Its just a bug with 767px for max-width. So if you need it exactly for that number the trick is a point number (almost 768):
#media (min-width: 767px) and (max-width: 767.9px) {
#sp-logo {width: 33.33333333%;}
}
So what I have is one with max-width: 992px, another is max-height: 732px and max-width: 992px. What I want is to media screen do something only if both height and width are lower than max.
I have this:
#media screen and (max-height: 753px) and (max-width: 992px){
}
How it should be?
Nvm, just place #media screen inside another.
You can use nested media queries. Something like this
#media (max-width:992px) {
#media (max-height:432px) {
.test-div{
background-color: blue;
}
}
}
Maybe this works well in your case
#media screen and (max-height: 753px) , screen and (max-width: 992px) {
....
....
}
Check Documentation Here
You should use only end in between your height and width property
#media (max-width: 992px) and (max-height: 732px) {
/* CSS stuff */
}
I have two media queries like so:
#media(max-height: 1100px) and (min-width: 1200px) {
}
and this
#media(min-height: 750px) and (min-width: 1200px) {
}
My browser screen height is 779, What I am trying to do is apply css code if my screen height is 750px or less and width is 1200px or more. Also apply css code if my screen height is more than 750px and width is 1200px or more.
What am I doing wrong? Currently my #media(max-height: 1100px) and (min-width: 1200px) is overriding the #media(max-height: 1100px) and (min-width: 1200px) code.
Try the following, I believe you are missing a keyword or two... Also, if your desire is to have specific styling be applied on screens smaller than 750, you need to indicate a max-height of 750, not a min-height. (I did not change these below to reflect the max/min, only added in screen and).
#media screen and (max-height: 1100px) and (min-width: 1200px) {
}
#media screen and (min-height: 750px) and (min-width: 1200px) {
}
Lets say i want to make my div responsive for same width but different height.
Same width but if height is different, it will optimize the div different, like the code below but it is not working.
#media all and(min-width:1280px) and (height:768px){
#myDiv{height:84%}
}
#media all and(min-width:1280px) and (height:1200px){
#myDiv{height:97%}
}
Try this code
#media screen and (min-width: 1280px) and (max-height: 768px){
#myDiv{height:84%}
}
#media all and(min-width:1280px) and (max-height:1200px) and (min-height: 769px){
#myDiv{height:97%}
}