Media Queries Not Working

[Timothy Smith]

My media queries are only partially working. Small things like font sizes, widths, and other things that are not being applied,

I need to use “!important” rules on this rules that are not working in the media queries and when I do, they override the none media queries rules.

All my media queries are in a separate file. I wonder if the order of the file ids the problem.

[Paulie_D]

Can’t diagnose code we can’t see!

Not sure why media queries would be in separate files though…that’s, erm, unusual.

The order of the media queries is important too.

https://css-tricks.com/logic-in-media-queries/

[Timothy Smith]

The reason I have the media queries in in separate files is because of basic organization. I have my style sheets broken into partials for easy sorting

Here are some Pens to show you sorta what I am refering to:

Problem
http://codepen.io/timbo27/pen/IJrHa

Fix
http://codepen.io/timbo27/pen/EKcHI

It is a small change but it worked. Just not sure why/

[Paulie_D]

The reason I have the media queries in in separate files is because of basic organization.

But you compile them into a single file on the live site surely…otherwise your site would be making multiple http requests which is poor practice.

By all means maintain separate files for development…but definitely not for ‘live’.

[shaneisme]

Agreed with what Paulie said of course, but I personally follow the method of keeping the media queries with the class default. It’s easier for me personally, I can see what’s up right there without having to scroll down to the bottom of the file, or go to another.

For instance:

http://codepen.io/drainpip/pen/zgrxB

Now I know exactly what <h1> will do no matter what.

Duplicating all those @media only... is actually OK too, it’s great for gzip compression.

[Author]

Posts