I've been using media queries to target tablets and down just by writing:
#media only screen and (max-width: 1199px) { ... }
However, I came across a tablet this weekend whose resolution were even bigger than that, triggering a menu it wasn't supposed to see. Normally, I don't care since I use these queries to trigger design changes that normally looks good in that resolution but in this particular case, it's not good since a hover based menu showed up that's obviously really hard to use on a tablet.
So I've been tinkering a bit with writing a media query that triggers on EITHER max-width or both of the orientations, like this:
#media handheld, (max-device-width: 1300px), (orientation: landscape), (orientation: portrait) { ... }
However, this seems to trigger on my computer as well and I don't understand why. Anyone know why, or has a better solution to my problem?
It's because you are using , instead of and in you media query condition .
For example:
#media handheld and (max-device-width: 1300px) and (orientation : landscape) {
.div {....}
}
#media screen (max-width: 449px), handheld and (orientation:landscape) { ... }
Try this one.
Related
I'm looking to find out how to perform css based on whether either one of two statements is true. For example:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
OR
and (max-device-width : 1024px)
and (orientation : portrait){
}
I'm making a multi-platform website and have finished the mobile version, however I want iPads to have the laptop/desktop version, all was working good with this:
#media only screen and (min-device-width: 0px){Mobile Version CSS}
#media only screen and (min-device-width: 500px){Other Version CSS}
But then I noticed after changing a mobile to landscape, it would switch back to the desktop mode, due to the width of the media query being less than the screens landscape width. What's the best set of media queries, that I can perform in two different queries, just for mobile and other platform, that take in account a phone being landscape or portrait? I don't want to have to repeat my CSS code through multiple media queries because of phones going landscape and such. I just want the mobile version to be active whether a mobile is landscape or portrait.
Thanks
That's nothing a quick google search couldn't have revealed to you: (first try) https://css-tricks.com/logic-in-media-queries/
media-query logic:
And: and
Or: ,
Not: not
In your case, your CSS would look like:
#media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
only screen and (max-device-width: 1024px) and (orientation: portrait) {
/* your css here */
}
Just some reminders:
Your media-query do not serve the situations "portrait and device-width < 768px" and "device-width > 1024px". You need to address those cases too somehow.
While an iPad (in ladnscape) has a screen-width of 1024px, you would present your websites desktop view to any other phones/tablets having a width of at least 768px, too. I don't think that's a good idea. But I don't know what your website looks like, so I assume you know what you're doing.
BTW: Wouldn't a grid-system like bootstrap do a lot for you?
Thanks Stack Overflow for helping. I've got some custom css I'm using to tighten up a design. I keep running into this issue where if I change something in one media query say for the iphone 6, that change then affects another device say the iphone 5. Its becoming this issue were I'm constantly adjusting with no end in sight. Here are my #media break points I'm using.
/* IPHONE 6 PLUS */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
}
/* IPHONE 6 */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
}
/* IPHONE 5s */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
}
/* IPAD LAYOUTS */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* IPAD LANDSCAPE */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
Any help would be greatly appricated.
I agree with Birdman, and you should consider a mobile first approach. Mobile first, however, means that the smallest device size is completely outside of any media query. The next size up will start the first media query. You only ever need a min-width, as these new styles will be in addition to the base styles, not overwriting them. Each media query created will continue to combine with those already called.
And instead of worrying about iPad this, or tablet that... worry about when your design elements start to look bad. All of the major browsers have intelligent enough emulators to test in different device sizes.
Here is a good article on the pros and cons. I always code mobile first, and never worry about styles colliding, unless I do it on purpose :)
https://codemyviews.com/blog/mobilefirst
When a device width falls between the media query's range, the styling will be applied. So if a device's width is 500px, it will first have the 6plus styling, which will then be overridden by the 6's styling, then the 5s'. Normally, it's not recommended to try to tailor your CSS for a specific device, but if you do want to, you'll need to make sure none of the ranges overlap, or they will just be overridden by whichever styling comes last.
I have one rule for media queries
#media only screen and (min-width: 768px) and (max-width: 1080px) {
I know 1080 is a weird number this was just for test...
That being said, when I resize my page, the background color (what I'm using to test the visualization of the breakpoint) changes when the width of the page is 1190px.
What is the reason this is happening, and how can I fix it?
Thanks
Update has anyone else heard of this happening? I'm using Semanitc UI, not sure if that has anything to do with this issue, I still haven't resolved it.
Try this
#media (min-width: 768px) and (max-width: 1190px) {
your CSS
}
I am having a strange problem with my media queries. They seem to be working just fine on my mobile devices, but when I resize my desktop browser the changes are not applied. This makes using web inspector/firebug impossible to inspect my mobile styles. Here is my media query:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {}
You are calling device specific queries. If you want to test on browser window resize, you need to remove -device- from both min and max calls.
#media only screen
and (min-width: 320px)
and (max-width: 480px) {}
I'm having some trouble with a bit of CSS where I'm trying to hide a div when viewed on tablets. The CSS media query for tablets works to handle this task, but unfortunately also catches some devices which are not tablets, such as netbooks. I have tried implementing a separate media query for netbooks but all that ends up happening is the netbook media query combines with the tablet media query and the div is still hidden.
The query I'm using to catch "netbooks" is
#media only screen
and (min-width : 900px)
and (max-width : 1160px) {
And the query I'm using to catch tablets is
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
I get that the resolutions overlap, but is there some other query I can use to differentiate the two?
Yes, JS is just fine (got a nice case of tunnel vision and missed it right in front of me :D ) and that link pretty much takes care of it. Thanks!
Matt's comment answered the question for me.