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?
Related
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
In CSS 3 syntax we have #media to define responsive screen to apply.
I intend to use it as custom code-folding for CSS entries.
E.g.
#media {
div { color: green; }
}
So I wonder if there are any side-effect problems may arise when doing so?
First off, the #media CSS at-rule is not new to CSS3. It was introduced in CSS2, and has been supported by every browser including IE5+. What is new to CSS3 are media queries. The difference between media queries and #media are detailed in this answer.
An #media rule without an accompanying media query is equivalent to #media all, which, again, is understood correctly by every browser including IE5 and up. In other words, in terms of browser behavior there are no side-effects other than hiding CSS from IE4 and any other browsers from the late 90s (which don't support #media in any way, shape or form).
Note that this construct does not validate as either CSS2 or CSS3 in the Jigsaw CSS validator; this is a bug with the validator which may be due to the fact that CSS2 did not explicitly allow empty media types with #media. Having said that, what is stated in CSS3 is consistent with browser behavior up to 17 years back, so this is something you can totally rely on.
I thought it would be a neat idea to put my default css which has no width/height/.. dependencies in a media query like this:
#media only all and (min-width: 0px){ ... }
Are there any possible drawbacks I've missed?
It's not as readable to be honest with you. If I were to see that in a CSS file, I would assume it's some weird CSS hack.
The other downside is you're adding an unnecessary media query. Setting all your default attributes through a media query is making more work for the CSS compiler.
Finally is support. Not all browsers support media queries, especially if you work in enterprise or with clients who have very old browsers. If you have all your defaults set through media queries you don't have an easy fallback if those queries fail.
It's not a good idea to use anything that isn't really adding to your webpages.
The unnecessary use of media queries can also cause problems with old browsers (eg. IE 7,8,9) if there is no polyfilling. It will also add to the page load time.
There are other numerous ways to increase readablity:
1.opening and closing comment lines to a set of CSS blocks
/******default code******/
html{
.....
}
body{
.....
}
/****--default code--****/
separate CSS files
code collapsing in IDE
other tips are mentioned here at Improving Code Readability With CSS Styleguides
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.
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