Right now I'm using these queries:
/*Desktop and laptops*/
media only screen and (min-width : 1224px)
/*Tablet landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
/*Tablet Portrait*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
I was wondering if I should change the first query to (min-width : 0px)
As you can see the other queries only work with landscape or portrait mode.
So if I make my screen smaller on laptop/desktop it doesn't use any CSS anymore.
What are your thoughts about this?
Related
I'm currently working on a project where it needs to be user friendly for multiple devices but came across issues on devices themselves when targeting devices with one of the two viewport that a re the same and still not able to find a solution for it.
I am using media queries to archieve this, of course sounds far enough but there is no explanation online to separate an iPad mini with this syntax
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : landscape) {}
And this
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait) {}
And an iPad Pro
#media only screen and (min-device-width : 1024px)
and (max-device-width : 1366px) and (orientation : landscape) {}
And this
#media only screen and (min-device-width : 1024px)
and (max-device-width : 1366px) and (orientation : portrait) {}
I am testing with the Chrome devtool for devices and is fine when i start with the biggest ipad but when i then go on with the smallest(mini), it overwrite the previous changes because the css is read from top to bottom so i am so confused please guys can you help me to understand better this concept?
Also for mobiles i have this multiple lines of code one for each mobile (iPhone 5, 6 ,6+ but still same issues)
iPhone 5
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
iPhone 6
#media only screen and (min-device-width: 375px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
#media only screen and (min-device-width: 375px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
iPhone 6+
#media only screen and (min-device-width : 320px) and (max-device-width : 767px)
and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {}
#media only screen and (min-device-width : 320px) and (max-device-width : 767px)
and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) {}
Literally I don't know how to be more specific then this but also here the iphone 5 because is the last one in the css is overwriting some stile in the iphone 6 or 6+.
How about writing different style sheets for each device
I would use just min-width instead of min-device-width and similar. A 768px x 1024px device with retina display (iPad Mini) actually has 1536px x 2048px device pixels (if the pixel taio is 2:1), so you either have to use the true device pixel size or use CSS pixel size.
Guys there's a problem with media queries targeting iPad and Samsung Galaxy Tab2. Media Queries i wrote for SGT2 are over-riding iPad ones.
Media Query I'm using for iPad -
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
For Galaxy Tab2 -
#media only screen and (min-device-width : 600px) and (max-device-width : 768px) and (orientation : portrait) {}
Is there any way i can avoid this conflict?
When I set the media queries for iPhone 6 plus, for landscape orientation, it renders fine, but it disturbs the layout of controls for iPhone 4S.How can I avoid this? I know that this is because of the padding I have set to override bootstrap's .well, but if I dont set it, there is a lot of unwanted space within the controls.
Here is my css code:
/iPhone 4 and 4S landscape/
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
h1, .h1{
font-size:26px;
}
.well{
padding: 59px;
}
}
/iPhone 6 Plus in landscape/
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
.mt-4x{
margin-top:20px !important;
}
.well{
padding: 175px;
}
}
Did you add this into your css media queries for the iPhones?
/* iPhone 6 in portrait & landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
}
/* iPhone 6 in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
}
/* iPhone 6 in portrait */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
}
/* iPhone 6 Plus in portrait & landscape */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
}
/* iPhone 6 Plus in landscape */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
}
/* iPhone 6 Plus in portrait */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
/* iPhone 5 & 5S in portrait & landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
}
/* iPhone 5 & 5S in landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
}
/* iPhone 5 & 5S in portrait */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/*
iPhone 2G, 3G, 4, 4S Media Queries
It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
*/
/* iPhone 2G-4S in portrait & landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* iPhone 2G-4S in landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
}
/* iPhone 2G-4S in portrait */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
}
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
}
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