I have the following media query:
#media screen and (max-width: 480px) {
When viewing the website in portrait mode on my Nexus 5, it looks the way I want. However, when I turn the phone over to landscape mode, it shows the full site and not what is specified within this media query.
Why is this happening? I've also tried:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
This did not resolve the issue.
Actually Nexus 5 Landscape width is 590px and you have given the max-width:480px....
See the view-port sizes
You can give the media queries like this also :-
#media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}
#media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}
it should work for you... try with this
The nexus 5's effective screen dimensions are 360x598 so in landscape the viewport is wider than the highest end of your media query. You can capture the landscape orientation of the nexus 5 by increasing your max-width to 599px.
#media screen and (max-width: 599px) { ... }
reference
Related
I've seen the CSS media query below recommended to target phones. Yes, it works for my phone. However, my phone, and many others, have resolution width 1080px. How does it work...?
#media screen and (max-width: 1024px) { }
Every devise has physical pixel size and a ratio for browsers. For instance iPhoneX has with 1125px and a ratio 3. So the CSS width will be 375px.
So for it's screen with physical resolution 1125px your media will be
#media screen and (max-width: 375px) { }
Very good table with devises resolutions, ratios and CSS scale here:
https://www.mydevice.io/#compare-devices
Although you can determine in media the -webkit-device-pixel-ratio and orientation, like this
/* iPhone X in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}
More about it here http://stephen.io/mediaqueries/
I have like 16 media queries or something and i noticed that if i put every media query portrait 1 different color some are falling under another media query. For instance i have:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
and i have for instance:
#media only screen and (min-device-width: 320px) and
(max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {}
Then both backgrounds are red but i put the second background on purple. I am referring to my own website www.gester.nl. Can someone help me and see into the website with media query code why some media queries are not working like they are supposed to work. Is it that i use a wrong order or something? I just use google f12 to see how it looks on other devices.
Your media queries are overlapping. You will want to use something like the below to target specific screen sizes:
#media only screen and (min-width: 320px) and (max-width: 480px) {
// do stuff between 320px and 480px
}
#media only screen and (min-width: 481px) and (max-width: 568px) {
// do stuff between 481px and 568px
}
My question is that media queries is working fine in all the devices but the problem is coming in samsung glaxay tab10.1 while it is working fine in ipad etc please check my media queries
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
This is because the Samsung Galaxy Tab 10.1 resolution is 800x1280 and you're looking for devices between 768x1024 so this wont work
ideally you should do mobile first and something similar to these media queries
#media screen (min-width: 480px) {
//css goes here
}
#media screen (min-width: 768px) {
//css goes here
}
#media screen (min-width: 1024px) {
//css goes here
}
here i done code for style.css for mobile device it the code works for mobile portrait size and when i rotate to landscape it call default css how to solve this issue
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
another terms are
#media (min-width: 481px) {}
this for all sizes like tablet,pc ..
for this i checked in web developer tool in google crome
The problem is when you rotate the device, it is screen is bigger than 480 px
#media screen and (orientation:portrait) {
...Some Css Code
}
#media screen and (orientation:landscape) {
...Some Css Code
}
This will help you
or
you can find the landscape resolution than you can target media query with that.
For Iphone 5 your media query must be like that
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.