Best way to apply media query for same width and different heights ?
For example i have this sample code
#media screen and (max-width: 1366px), screen and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
and
#media screen and (max-width: 1366px), screen and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
The problem is, even on 1366 X 657 the article#chapterthankyou{
width:984px;
} style is applied.
How can i accurately apply height width conditions ? Thanks
You are close, but according to this article on the MDN, you are a little off with your logical operators.
For your code, try using this:
#media screen
and (max-width: 1366px)
and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
And...
#media screen
and (max-width: 1366px)
and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
If this still does not work, then refer here for a list of different media queries, which you might find useful.
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) { ... }
I want to use AND condition in media query. I use the the following code, but it didn't works
#media screen and (max-width: 995px AND max-height: 700px) {
}
It's missing close and open parenthesis before and after the Logical Operator
#media (max-width: 995px) and (max-height: 700px) { ... }
The correct and simpliest way to write this is:
#media screen and (max-width: 995px) and (max-height: 700px) {
}
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
From https://developer.mozilla.org/en/CSS/Media_queries/
...In addition, you can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This is the equivalent of a logical "or" operation.
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.
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.
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%;}
}