#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) { ... }
Related
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) {
}
I have four viewports set up for a site, as follows:
#media only screen and (min-width : 769px) {
...
}
#media only screen and (max-width: 768px) {
...
}
#media only screen and (max-width: 480px) {
...
}
#media only screen and (max-width: 320px) {
...
}
and have declared the viewport meta with meta name="viewport" content="width=device-width"
All the code works fine except for 320px. Even when I am just resizing in the browser, when the width is 320px the css is for the 480px width.
Not sure where the error is (feel free to upload the code to a jsfiddle) but you could make it bullet-proof by being specific about max/min sizes for each media query.
#media only screen and (max-width: 320px) {
...
}
#media only screen and (min-width:321px) and (max-width: 480px) {
...
}
#media only screen and (min-width:481px) and (max-width: 768px) {
...
}
#media only screen and (min-width : 769px) {
...
}
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 trying to set different image sizes according to the screen resolution, some of them work and some don't. Here's my Code:
#media screen and (max-width: 1280px) {#gallery-1 img {width:375px;}} // for 1280px screens
#media screen and (min-width: 1366px) and (max-width: 1439px){#gallery-1 img {width:375px;}} // for 1366px screens
#media screen and (min-width: 1440px) and (max-width: 1599px) {#gallery-1 img {width:428px;}} // for 1440px screens
#media screen and (min-width: 1600px) and (max-width: 1919px) {#gallery-1 img {width:434px;}} // for 1600px screens
#media screen and (min-width: 1920px) {#gallery-1 img {width:540px;}} // for 1920px screens
The code is not working at all for the 1366px and 1280px x 600px screen. 1280px x 960px works with the code for the 1366px. 1280px x 1024 works with the code for the 1440px. Can anybody please help? Thank you!
you don't need to set a maxwidth on your media queries as the next media query overrides it anyway. Try this:
#gallery-1 img {
width:375px;
}
#media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
#media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
#media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
#media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}
Instead of using
#media screen and (min-width: 1366px) {
/* Styles go here */
}
Use media query differently like
#media (max-width: 1366px) and (min-width: 1441px) {
/* Styles go here */
}
this thing will specifically call out in which limit which styles should be applied.
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%;}
}