I cannot figure out why my page is ignoring margins on this page on an iPhone 5 (iOS 8) on Chrome!
It seems that media queries are being ignored, yet I have have the viewport meta tag! What's going on?
Here is the site:
http://ec2-54-183-220-135.us-west-1.compute.amazonaws.com/spitz/contact.html
It seems to be working fine?
However, usually when media queries are not working, it might be because other css is overriding.
Remember to always have media queries below your general css rules. If there is no spesific rule in your media query, the properties further up your css-sheet will be applied.
Related
I have created a website to test out media queries and have the following in my stylesheet:
#media(max-width:4096px){...}
#media(max-width:1920px){...}
#media(max-width:1440px){...}
#media(max-width:1366px){...}
#media(max-width:1136px){...}
#media(max-width:1080px){...}
#media(max-width:1024px){...}
#media(max-width:980px){...}
#media(max-width:960px){...}
#media(max-width:768px){...}
#media(max-width:720px){...}
#media(max-width:640px){...}
#media(max-width:320px){...}
The problem is that whenever I am on Firefox Responsive Design tool and I scale to different resolutions (say 1366px for example). Instead of loading the 1366px styles it will load the styles from 1440px.
This happens for all the queries not just 1366px. However when I try this on Chrome I do not get that issue. I use Chrome 36 and Firefox 30, so I don't think there is a problem with the version.
Is there anyway to make my website re-size without this issue, and why is this issue occurring?
Thanks.
Because you need to include min-width example;
#media(max-width:1440px) AND (min-width:1367px){...}
#media(max-width:1366px) AND (min-width:1137px){...}
This will help eliminate conflicts.
So, well, we have an XPage application which works very well on all the browsers including the internal notes browser. Since, our target audience is both the desktop/mobile users we have designed a responsive layout using css media queries which works well on browsers, however, we just found out that when it runs as a notes application, it doesn't respect the media queries. It works as if there were no media queries (For eg. even the mobile specific items are shown on desktop). Any suggestions here to get it working? We are far way through and removing media queries would be kind of a last alternative.
Any help would be really appreciated. Thanks!
I think the reason is that your Notes browser is rendering as IE. IE doesn't support media queries up through IE 8.
IE is the default, try changing the internal browser to Firefox. See this link for instructions.
http://www-01.ibm.com/support/docview.wss?uid=swg21268588
I'm trying to find as reliable a method as possible to hide content from mobile email clients.
Ideally the solution will hide content by default from devices that don't read media queries, but display on desktop clients that also don't read media queries.
For now I'm using code derived from another post to hide the content and then I use a media query to turn it back on. I've seen a lot of reverse posts here with solutions for hiding content on the desktop, which helped.
The issues with my current solution are:
On Gmail desktop content isn't showing even though the "display: block !important" in the query has the !important declaration
This doesn't work for Outlook 2003 or below because they don't read media queries
Doesn't work on Yahoo and AOL Mail on desktop because I believe they don't read media queries
Wrapper div to hide content on mobile:
<div class="desktop" style="width:0; overflow:hidden;float:left; display:none">
Current media query override to turn content on for tablets,desktops:
#media only screen and (min-width: 768px) {
.desktop {
display : block !important;
width : auto !important;
overflow : visible !important;
float : none !important;
}
Gmail doesn't support the style tag, so media queries will not work. Same goes for all of these clients (you mentioned a few of them).
There are a few tricks where you can target some specific clients by using CSS that is not supported in others, (plus mso tags for Outlook). For desktop vs mobile, you're pretty much stuck with media queries, which are not fully supported themselves.
As you've linked in the question, you can try combinations of max-width and/or min-width media queries. You could also try device-pixel-ratio in your media queries to isolate devices. That is pretty much all you have to play with unless you want to use floats or fluid layouts.
CSS display is not supposed to be supported in Gmail according to CM's CSS support chart (full pdf), but if it is in fact hiding your content, you won't be able to override the inline declaration due to the lack of style tag support. This issue would have been there with the other non style tag supported clients anyway...
Not really a solution, but I hope this clarifies things a bit.
I have a mobile website that is styled with extensive use of CSS3 Media Queries.
I want to do a version for browsers that don't support Media Queries by adding an extra css file for them, that overwrites some of the css rules.
I was wondering if there is a way to disable Media Queries support in Firefox (21.0) to be able to develop, since I don't have anything else to test with.
A Chrome solution would also work out, although I prefer using firebug.
You could always try testing in IE 8.
Media queries is something you define in your CSS, if a browser does not understand media queries, it has no support for it, it will not execute the CSS that makes the site responsive.
As a result you will have a not responsive site in a browsers that not supports media queries, thats the whole point of media queries.
There is no option in any browser to disable media queries.
If you want to test your site without the media queries kicking in, comment out the rules in your CSS. With this approach you can continue testing in Firefox, without having the need to test in Internet explorer 8
You have it backwards. Media Queries and corresponding rules are implicitly ignored by browsers which do not support them. The common/basic rules must therefore come before the specialized ones, not vice-versa.
You should always test in the target environments. If that is not an option, you can put the media-specific rules in a separate stylesheet and disable that stylesheet, for example with HTML comments or the Web Developer extension (apparently this feature of the extension is not available in Chromium/Chrome, but you can disable "Handheld Styles"). Equally with Web Developer and Chrome Dev Tools you can test media-specific stylesheets as if you were using the corresponding viewports. But do not rely on that; there is more to it than just viewport size.
There's a fairly old article on smashing magazine (technique 3) that says that if you start a media query like this:
#media screen, all and (min-width: 300px)
then browsers that understand media queries will understand the whole media query where as older ie will ignore everything after "all and". So in theory older ie still sees everything inside the query. This is amazingly true for ie6 and ie7 but unfortunately ie8 ignores all the rules inside the query.
It's unfortunate because if we could get
We can do something similar using Jeremy Keiths example which involves moving the layout stuff into a separate style sheet and using conditional comments to serve this to older IE.
The problem with this approach is that that my css modules are split between separate style sheets. This goes against principles in OOCSS and SMACSS (which are really useful!)
There's a JS Fiddle where someone has tried to crack it but wondering if anyone has any ideas on how to do this?
Credit to #cimmanon for the comment which led me to a solution.
Using .less I can have
global.less - This has all my CSS in there including all my breakpoints. The breakpoints are set as less variables.
compiled.less - This imports global.less and compiles to a css file
Compiled-belowie8 - This imports global.less and compiles to a css file BUT I've changed the widest layout's media query variable to "none" so that in this one there is no media query.
Then, in the I've used conditional comments to serve compiled.css to all browsers except