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.
Related
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.
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?
I'm using Windows 10, Codeigniter, jQuery and Firefox 43.0.4 although I can't see why that would affect this issue. I want to apply styles to an iPad size window so I'm using this media query:
#media only screen
and (min-device-width: 768px)
and (max-width: 1024px)
{
*{color:#ff0000 !important;}
}
as a test that should turn all text red but it's not working in Firefox 43.0.4 (or Chrome etc). I'm also using the Web Developer extension to set the portal to the correct size. I've used the head section metatag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Probably obvious but I can't see it and I've used media queries before. This is driving me nuts and I would be grateful for any suggestions as to where I'm going wrong.
I believe you are missing the device prefix, the CSS should be:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
You can read more information on Stephen Gilbert's site.
You dont have to use min-device-width, just use min-width
#media screen and (min-width:768px) and (max-width:1024px) {}
Try something like this:
#media only screen
and (max-width: 480px),(min-device-width: 768px)
and (max-device-width: 1024px)
I appear to have fixed the problem by using Mathew Riches code above and the reason I didn't recognize this earlier is that, for me, it doesn't work in a resized firefox browser window which has been my testbed of choice. To use the resized browser I need to use:
#media only screen
and (min-width : 768px)
and (max-width : 1024px) { /* STYLES GO HERE */}
but that doesn't work on my iPad 4. And inciddentally any use of:
and (-webkit-min-device-pixel-ratio: 2)
with a pixel ratio of 1 or 2 killed the response on my iPad 4.
So the only way to test has been to upload every change in CSS and check on the iPad itself which is pretty irritating as I normally use my local server for all development.
I then discovered a problem with full-screen background images on the iPad but that is another story...
Many thanks to all contributors for your thoughts and for my purposes I now regard this query as solved.
I have used the media queries for different width.I have used 3 Style sheets for mobile, tab and desktop views as follows:-
For Mobile View:-
#media only screen and (min-width : 120px) and (max-width : 640px) { }
For Tab View:-
#media only screen and (min-width : 640px)and (max-width : 980px){ }
For Desktop View:-
#media only screen and (min-width : 980px) { }
When I am re sizing my browser then it is showing the adaptive view but while checking in mobile device the web page is still showing the browser view.
The responsive view is also not adaptive while checking in the Device Emulator functionality of the google chrome browser.
However the side menu bar used for mobile view is still visible in the mobile view as expected but the remaining site is not adapting the width and height accordingly.
Can anyone explain the issue and reason behind it.
P.S. : I am restricted to media queries not able to use Bootstrap or any other framework for making my site responsive.
Here we go. As per your media queries, browser is not sure what layout should be adapted because you have defined the same width as break point.
What you need to do is define media queries like this.
For Mobile View:-
#media only screen and (min-width : 120px) and (max-width : 639px) { }
For Tab View:-
#media only screen and (min-width : 640px)and (max-width : 979px){ }
For Desktop View:-
#media only screen and (min-width : 980px) { }
Hope this help you.! Do come back if still having issue.!
Try to remove only screen and and leave it like #media (min-width : ...
these attributes is not required.
If it works but you really want to use screen and just remove the only keyword. From specs:
The keyword ‘only’ can also be used to hide style sheets from older
user agents. User agents must process media queries starting with
‘only’ as if the ‘only’ keyword was not present.
If at least something from #media section is working for your mobile device make sure that ALL your #media sections placed at the bottom of your CSS file and that this file are linked to you html the latest among all other CSS files. If it still doesn't work for you as expected check your actual CSS code or make a demo for us. How to make Minimal, Complete, and Verifiable example
PS.: You don't have to specify min-width for the smallest screen in the list of #media
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) {}