This is the same media query I've used for all my other WordPress sites but for some reason it's not working for this particular site.
Often I can get away with just using:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){}
But I've tried that, and I've tried:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {}
But neither are registering. It's not a cache issue, either.
Additionally, for some reason when I inspect the site, everything lists as being received from site/style.css:1 even though my code is around line 604.
It was retrieving the css from all of the desktop styling, so as a test I added #media only screen and (min-width: 1025px) {} to my desktop styling, just to cancel it out, and sure enough, now my landscape header is all reverted back default styling (full sized image, default h1 styling, etcetera). Nothing I do triggers the landscape media query, even though the rest are called without any issues at all. I'm about to pull my hair out, and I can't find anything else on Google that quite fits as a solution.
The mobile and iPad Portrait media queries are working perfectly.
Any help is appreciated!
As I can't comment yet:
Do you use any sort of minifying? And are you sure that your .css file has no errors? With both these questions I'm referring to the style.css:1 thingy.
Related
I want to exclude iPads from using my CSS styling for desktop views on my website. I built my site mobile-first, so the desktop styles are in a media query.
While messing around with my code I tried this:
/*mobile and default styles (the styles I want the iPads to use)*/
#media (min-width: 750px;),
#media (device-width: 768px) and (device-height: 1024px) /*iPad resolution*/ {
/*desktop styles (the styles I don't want the iPad to use)*/
/*in this code, these styles are currently being ignored by iPads*/
}
I don't think this is valid code but it works correctly in every browser and device I have tested.
It has to do with having two #media lines on one media query. The second set of parameters are somehow excluded from the query, but I don't understand why. Without the second #media then it works like an or operator and the desktop styling will show up on an iPad.
I have tried nesting media queries, which doesn't seem to work, and I have tried using not, but the first line will still be true and thus it work work either.
I haven't found any information about using #media twice in a statement and having it somehow exclude the second media query, could someone explain the correct way to do this, or at least explain why this works?
Brilliant - yet incorrect syntax according to VS12.
Can be seen working here http://www.stilborg.com on iPad.
Sometimes, when I load a page on the Internet on my phone or tablet, it does not look right. Is it possible to inject custom CSS into a page on these devices?
UPDATE:
I am the developer of the site, but it would be cool to change the site without login and to add it to the browser. So only I can see it and I do not have to login.
Browser plugin would not be sufficient. The idea is to add pieces of CSS inside a "webview" on the iphone/ipad for a specific page.
If I understand your question well, you want to create mobile-specific CSS to fix your website's viewing, is that right?
If so, you can use CSS's media queries for so, like this:
#media only screen
and (min-device-width : xxx px)
and (max-device-width : xxx px)
and (orientation : landscape or portrait)
and (min-resolution: xxx dpi){
// your css goes here
}
Here are some links that might help you:
http://help.campaignmonitor.com/topic.aspx?t=164
How to apply different CSS for mobile devices not just based on media width/height
http://css-tricks.com/snippets/css/retina-display-media-query/
I'm currently trying to make some CSS changes to the mobile edition of a website using the Wordpress theme Responsive by ThemeID. I've spoofed my user agent to a Samsung Android, but this site still displays as if it were a desktop. When viewing it on an actual mobile device, the theme changes.
I'm sure I've spoofed my UA correctly because Google, Youtube, Yahoo, MSN, Stack Overflow, etc. all respond to my browser being mobile. Does this theme not really have a mobile view or something?
The theme format is controlled by CSS media queries. No need to forge a UA, just resize your desktop window to a narrower width to invoke the mobile view.
Theme indeed uses Media Queries breakpoints and they will adjust and adapt the layout to any* viewing environment.
Responsive breakpoints are:
#media screen and (max-width: 980px) {}
#media screen and (max-width: 650px) {}
#media screen and (max-width: 480px) {}
#media screen and (max-width: 320px) {}
#media screen and (max-width: 240px) {}
Thanks,
Emil Uzelac
P.S. We have a dedicated support forum, just in case that further assistance is needed.
I am working on a responsive site and my client wants certain styles to apply to the desktop at 768px but NOT to tablets at that size. I've tried multiple media queries but I can only get Firefox to cooperate. Chrome, Safari and IE all ignore the media query. Here is what I tried.
#media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) {
/* styles for desktop only here */
}
I think it has to do with the "not" operator but I don't see that I'm doing anything wrong. It's also worth mentioning that the ipad (in my simulator) ignores the media query which is exactly what I want. I just can't get the Chrome, Safari and IE on my desktop to read the dang thing.
Each and every Media Query string separated by commas should be fully formed (I'm not aware that in the spec anything carries over from one to the next ...although some browsers may support "shortcuts" here, it's prudent to stick to the lowest common denominator: the spec). (Among other things this makes testing easier since simple text mods allow you to test one Media Query at a time.) And of course "only" and "not" are mutually exclusive options. So I think the syntax should be
#media only screen and (min-width: 768px), not screen and (min-device-width: 768px) and (max-device-width: 1024px) {
(xxx-device-width: and xxx-width: [with inclusion or exclusion of "-device"] refer to the screen width and the viewport/layout width respectively [which are typically the same for "desktop" devices, and for most handhelds if <meta name="viewport" content="width=device-width"> was specified, but may not be the same for smartphones without the "viewport" specification in the HTML source of the page). I don't typically see a mixture of the two in a single Media Query statement, and so [even though I haven't yet tried to understand this example in detail] I suspect something is a bit awry.)
You can't tell appart tablets and computers with resolution media queries : too much different resolutions on different hardware and no real common rule (have a look here, and that's only Androïd !)
You should detect touch support with Javascript, add a class to your HTML tag and build your CSS on this basis, bearing in mind it's not a 100% catch (there are touch computers.)
Try http://www.modernizr.com/ !
Other answers have suggested alternative approaches. I'll try and explain why what you were trying didn't work (as expected). I think this would be useful for people trying to get not working in media queries.
Negation of media expressions (individual parts like (min-device-width: 768px), as opposed to media queries, which are the full items in the comma-separated list, like only screen and (min-width: 768px)) requires CSS Level 4 which (AFAIK) is currently only supported in Firefox.
CSS Level 3 does support negation of full media queries (only), but if you use the not operator, you must also specify a media type.
So a Level 3 media query for 'not a tablet-sized device' would be not all and (min-device-width: 768px) and (max-device-width: 1024px) (or not screen and ... as suggested in #Chuck Kollars' answer).
not (min-device-width: 768px) and (max-device-width: 1024px) is not a valid Level 3 query but is a valid Level 4 query. However, not has greater precedence than and so it actually means (not (min-device-width: 768px)) and (max-device-width: 1024px) which is not what you intended.
The inner CSS rules are applied whenever any of the media queries in the list match. In other words, the comma (,) acts like an or operator. So what you were trying actually means 'at least 768px wide, or not a tablet', which will match almost everything (or would do with the media type added to the second query so it can be parsed by Level 3 browsers).
The only way I can think of to achieve what you were intending with CSS Level 3 would be something like
#media screen and (min-width: 768px) and (min-device-width: 1025px),
screen and (min-width: 768px) and (max-device-width: 767px) {
}
(Though the second media query now looks probably superfluous and unlikely to match.)
But as stated in #mddw's answer, this won't exclude all tablets and may even exclude some other devices.
Per Apple's developer instructions, I am using the following CSS to affect only iPads and iPhones. However, the CSS seems to be affecting older browsers as well (e.g., Firefox 3.5). Any suggestions on how to target only the iPad/iPhone or only target Firefox 3.5, but not both?
#media screen and (max-device-width: 1024px) {
{...}
}
The Media Queries are based on screen size (among other things). To target the iphone you need to change your query to something like:
#media screen and (max-device-width: 480px) {
{...}
}
This will only target devices with a max display resolution of 480px
You can read more here: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
And I would definitely check out the new Responsive design book from A Book Apart - really really good