My goal is to target all screen widths 640px and under. It works on 640px and under but the problem is that it's also applying the styles on "small.css" to all screen sizes instead of just 640px and under.
Sorry for the confusion. Let me try to explain more clearly.
If I put the (max-width: 640px) code in my header after the "style.css" (or my main stylesheet) it applies the styles from the max-width:640px stylesheet to all screensizes instead of just to screens that are 640px or less.
If I put the (max-width: 640px) code in my header before the "style.css" (or my main stylesheet) it doesn't apply the styles from the max-width:640px stylesheet at all to any screens.
Hi. I'm following a tutorial found here: http://css-tricks.com/resolution-specific-stylesheets/
I added this snippet to my header:
My goal is to target all screen widths 640px and under. It works on 640px and under but the problem is that it's also applying the styles on "small.css" to all screen sizes instead of just 640px and under.
Website: http://www.honeysucklelife.com/
Any ideas as to what I'm doing wrong?
We'll need to see the link to your site but at a guess, you have other stylesheets linked after the 'small.css' which are overriding that one
Or perhaps you did you not include the full snippet or perhaps you didn't add the full snippet for all stylesheets?
Sure thing: http://www.honeysucklelife.com/
Ok so the width specific stylesheets should go before the main stylesheet in the header?
Sorry - this is the code I have in the header:
/css/small.css" />What do you mean by main stylesheet?
You seemed to indicate that you wanted specific viewport widths to receive specific stylesheets is that not the case?
In any case, this looks to be a WP site and I suspect that any advice I could give in that regard is likely to be wrong.
Sorry for the confusion. Let me try to explain more clearly.
If I put the (max-width: 640px) code in my header after the "style.css" (or my main stylesheet) it applies the styles from the max-width:640px stylesheet to all screensizes instead of just to screens that are 640px or less.
Does that make sense?
If I put the (max-width: 640px) code in my header before the "style.css" (or my main stylesheet) it doesn't apply the styles from the max-width:640px stylesheet at all to any screens.