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) {
...
}
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 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) {
}
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 want to design a web site.but tell me what are the sizes i can use for responsive website design.
that sizes must contain for mobile,tablets,pcs and other devices..
i want to use them in media queries.. :D
EX for Mobile:
#media only screen and (min-width: 500px) {
}
EX for Tablet:
#media only screen and (min-width: 800px) {
}
Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D
like that i want to know what are the reals sizes for these devices that i can use. :D
/* #1- Desktops */
#media (min-width: 980px) { ... }
/* #2- Portrait tablet to landscape and netbooks */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* #4- Landscape phones and down */
#media (max-width: 480px) { ... }
For actual device specifications, check out this link by CSS-tricks..
Here is the full list of media breakpoints
#media all and (max-width: 1690px) { ...}
#media all and (max-width: 1280px) { ...}
#media all and (max-width: 980px) { ... }
#media all and (max-width: 736px) { ... }
#media all and (max-width: 480px) { ... }
Check out for more informations about responsive device sizes : Medium
I hope so it's will help.
Is this possible? It seems like a neat solution to me, but I'm not sure if it will work.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Code for both portrait and landscape */
#media (orientation:portrait) {
/* Code for just portrait */
}
#media (orientation:landscape) {
/* Code for just landscape */
}
}
You should be able to nest #media rules this way in CSS3, but it isn't yet supported by most browsers. See this answer for details.
You would have to fully expand and repeat the top-level media queries for the inner rules for it to work across browsers (and I imagine the SCSS processor would generate something similar):
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Code for both portrait and landscape */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
/* Code for just portrait */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
/* Code for just landscape */
}
If you wanted to do this the best way is to use the high level media query in a link tag, and then the other queries inside the linked sheet.
In practice though most people cascade their CSS rules from a base sheet that covers the common stuff and then putting changes to that in each media rule-set.
I think not possible but you can write this format If you are using SASS css pre-processor.
example , you can copy this code and paste to https://www.sassmeister.com/ -and watch the output
SASS
#media only screen and (max-width: 767px) {
body{
color:red;
}
#media (orientation:portrait) {
body{
color:green;
}
}
#media (orientation:landscape) {
body{
color:orange;
}
}
}
Output CSS
#media only screen and (max-width: 767px) {
body {
color: red;
}
}
#media only screen and (max-width: 767px) and (orientation: portrait) {
body {
color: green;
}
}
#media only screen and (max-width: 767px) and (orientation: landscape) {
body {
color: orange;
}
}