Grow your CSS skills. Land your dream job.

Max Width Stylesheet Being Applied to All Widths

  • # January 31, 2013 at 11:52 am

    Hi. I’m following a tutorial found here: http://css-tricks.com/resolution-specific-stylesheets/

    I added this snippet to my header:

    # January 31, 2013 at 11:58 am

    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?

    # January 31, 2013 at 12:00 pm

    Sure thing: http://www.honeysucklelife.com/

    # January 31, 2013 at 12:04 pm

    Ok so the width specific stylesheets should go before the main stylesheet in the header?

    # January 31, 2013 at 12:21 pm

    Sorry – this is the code I have in the header:

    # January 31, 2013 at 12:22 pm
    # January 31, 2013 at 12:22 pm

    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.

    # January 31, 2013 at 12:30 pm

    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?

    # January 31, 2013 at 12:31 pm

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".