IS media-query will work in IE8 Iframe?
I want to load responsive website in iframe (width:600).media-query is taking all browsers but in IE its not taking. how to fix it?
Is there any solution apart form media-query
i've tried "css3-mediaqueries-js"
Thanks
Shanid kv
No, mediaqueries don't work in IE8 : http://caniuse.com/#feat=css-mediaqueries
Rather than trying to find a workaround for this old browser, I would suggest to find a gracefull fallback, or better, not support it.
This is another polyfill for mediaqueries - https://github.com/scottjehl/Respond
#media screen and (min-width: 480px){
...styles for 480px and up go here
}
and reference the js file in the link on your page
#all,
I got the solution instead of writing media query we can do with "max-width" and "percentage width". in this case it will work in IE8 also.
here is the example
http://scottjehl.github.io/Respond/test/test.html
Thanks
shanid kv
Related
I'm having multiple projects now who's media queries are acting weird. for example:
#media only screen and (max-width: 891px) {
.lang-selector {
top: -150px;
}
}
This only loads starting from 801px and less, although I do not have this media query set in my SCSS (it should be starting from 891px).
Console output:
I'm working on Windows 10 and I get the same result in Firefox, Google Chrome, Microsoft Edge.
I don't think it's to do with your media query. I took your media query in code pen and performs just fine. Perhaps look at other elements and queries that may be impacting this class.
Example where the text turns red
Ok, apparently, today my problem seems to be fixed.
The most logical reason should be that my browser was not at 100%, although I'm not sure because yesterday I checked that. Maybe a reboot fixed the problem...
I compile my gwt project with gwt-style=OBF and realize that this generates media queries where the space between "and" and "(" is missing.
So out of
#media screen and ( ... gets
#media screen and(
According to W3C this not ok and also does not work (at least in Chrome and Firefox). Do you have any idea how to generate working CSS and still use gwt-style=OBF?
"GWT-CSS" (or "GWT-aware CSS") is limited to CSS 2. If you want CSS 3 you have to use "GSS".
this post was a mistake by myself. I assumed that obfuscation would cause the problem above. As I learned now it has nothing to do with obfuscation but with minifying the css. We used yui-compressor which has a known bug when it comes to #media and ... So we just need to switch the tool for minifying the css.
Sorry for the mistake
I am just asking, since didn't find anything relevant here.
Is using media queries together with display: none a legit thing for creating a mobile version of the web-site? I mean, is this an acceptable practice or is there another way to do so?
I just used it on a project, looks alright, but maybe there are some snags here?
Thank you in advance.
You could only work with media queries instead of having one default css. In that case you wouldn't need to set something that you don't use in other resolutions.
e.g.
put here everything which you don't wanna show in the lower resolutions:
#media only all and (min-width: 1024)
I have two media queries in my css (not counting the print one) :
#media screen and (min-width: 720px) {} and #media screen and (min-width: 1026px) {
I am using respond.js to get them to behave under IE8. The weird thing is that it works perfectly, except for the last media query where it reverts back to the css before the media queries. I.e., it works well until the window hits that 1026px threshold in width.
Anybody got an idea as to what is going on there ? Here is the link to the preview : http://bit.ly/i6ITPe
Thanks a bunch for any answer
I have been having several issues with this and have found it working on and off again. First off based on the forums I have been reading you should not include respond.js from modernizr, they are more than likely going to drop it. Also when you include respond.js add it after all of your stylesheets. It should be one of the last things to load. Hope that helps! =)
There are a few things to bere in mind when using respond.js
It needs to parse the css by making an ajax call to the stylesheet in a link element
It cant understand dynamically created CSS from eg client side LESS , or styles injected via document.write, jQuery etc,.
#Import statements are not followed inside stylesheets
Hope this helps.
I'm not sure if this applies to you, but I just found an issue that breaks the css while using respond.js.
do you have any elements that open and close with no styles i.e:
ul.demo{}
I found this was breaking my css in ie 8 and below
My media queries were working, but now they're not. I missed the point where something went wrong. As I inspect html elements in Chrome's version of Firebug, it shows that the media query rules are being overwritten by rules defined earlier in the compile process.
Can anyone spot the issue?
http://www.jezenthomas.co.uk/huang/
The syntax on your queries might be off. Try changing:
#media screen and max-width 650px {}
to
#media screen and (max-width:650px) {}
Also, your * selector is running rampant through the streets and obliterating all your padding and margin indiscriminately. See the answers to this question:
(why) is the CSS star selector considered harmful?