1

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/

Jezen Thomas
  • 13,619
  • 6
  • 53
  • 91

1 Answers1

1

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?

Community
  • 1
  • 1
Aaron Lampros
  • 290
  • 2
  • 5
  • Good suggestion; I replaced it with a Meyer reset, though that didn't fix my media query problem. Strangely, it displays correctly on the iPhone, i.e., the iPhone is understanding the max-device-width media query. – Jezen Thomas May 09 '11 at 11:39
  • What is the expected outcome you're looking for? – Aaron Lampros May 09 '11 at 23:07
  • If you see in my style.css about 70% of the way through, after /* The following are media queries for displaying in different viewport sizes */, I have defined a number of media queries. The expected behaviour is that font sizes and element widths would decrease after viewport width is narrowed to 900px, then 650px, and finally 480px, as defined in style.css. – Jezen Thomas May 09 '11 at 23:50
  • In case anyone else gets a similar problem: I have now learned that the syntax was ruined by using the CSS Code Beautifier (http://www.codebeautifier.com/). – Jezen Thomas May 16 '11 at 20:58