The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Multiple style sheets in WordPress

  • # February 19, 2012 at 8:04 pm

    I have read about a dozen articles from sources all of the web and can not seem to find the solution I need. I am basically trying to say that if the browser size is above 1200px refer to largestyle.css and below 1200px refers to smallstyle.css. Does anyone have a smart solution or article?

    # February 19, 2012 at 8:23 pm
    <link rel="stylesheet" href="smallstyle.css" media="(max-width: 1200px)">
    <link rel="stylesheet" href="largestyle.css" media="(min-width: 1200px)">
    # February 19, 2012 at 10:07 pm

    Do you replace

    # February 19, 2012 at 10:30 pm

    Replace the default style sheet link with the above.

    # February 19, 2012 at 10:36 pm

    That part?

    # February 19, 2012 at 10:59 pm

    Yes. Just make sure to get the path to the new style sheets correct.

    Also, I have assumed that you are using a HTML5 doctype, and as such, removed the trailing slash, and the type attribute.

    # February 20, 2012 at 7:25 am

    First you make a folder name css in your theme, then in your main style.css just import css files e-g @import url(‘css/basic.css’); as it is import other files.

    # February 20, 2012 at 3:38 pm

    @visio your basically using media queries right? My question would be how does the site know which stylesheet to use when the browser is resized if you are just @importing them into the main stylesheet? Would you still not have to do what @joshuanhibbert is saying?

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed