how to load my css and js first on drupal 7

Question

I'm using Omega theme as base theme and created subtheme. I disabled the "responsive grid" in subtheme.

It works perfectly in screen width 960px as "DEFAULT (960PX) LAYOUT SETTING (Normal)".

When i load the same website in Wide screen more than 1200 px, first it loads "DEFAULT (960PX) LAYOUT SETTING (Normal)" after it override my CSS which i wrote of Wide screen.

How to load my CSS and JS first to make sure the CSS will work for wide screen as well.

Answer 1

My advice is that you enable the responsive grid and then you could apply CSS to the site by using the following basic format. If you read my inline comments, I think you'll get the gist of it.

There is an alternate way to do this where each breakpoint's css is put in its own file. This involves adding some lines to your subtheme's .info file and is pretty well documented here.

This approach may seem overwhelming to you (it did to me at first), but you'll be making a responsive site (one that looks good on all devices) which is a really great skill to have. You test the different breakpoints by resizing your browser window or using browser developer tools. You should also test on actual devices, but I do my initial design and testing by just resizing my window.

/*CSS for genchstyle theme - all breakpoints*/

/*GLOBAL STYLE INFO FOR ALL DISPLAY BREAKPOINTS*/

    h2 {
    color:rgb(204,204,204);
    font-family:Arial,Helvetica,sans-serif;
    font-size:1.2em;
    } 

/*MEDIA QUERIES FOR RESPONSIVE DESIGNS*/

/*Wide - larger computer screens and retina devices*/
@media all and (min-width: 1200px) {

    body{
    background:#000 url(../../../../default/files/grate-wide.jpg) repeat;
    background-attachment:fixed;
    width:100%;
    font-size:100%;
    }   

}

/*Normal - iPad horizontal & small-to-medium computer screens*/
@media all and (max-width: 1200px) {

    body{
    background:#000 url(../../../../default/files/grate-normal.jpg) repeat;
    background-attachment:fixed;
    width:100%;
    font-size:100%;
    }   

}

/*Narrow - iPad vertical & kindle fire, etc.*/
@media all and (max-width: 960px) {

    body{
    background:#000 url(../../../../default/files/grate-narrow.jpg) repeat;
    background-attachment:fixed;
    width:100%;
    font-size:90%;
    }

}

/*Fluid - Small Mobile Devices & smart phones*/
@media all and (max-width: 720px) {

/*Background - mobile*/

    body{
    background:#000 url(../../../../default/files/grate-fluid.jpg) repeat;
    background-attachment:fixed;
    width:100%;
    font-size:90%;
    }

} 

You can see this in action on the site I'm building (it's an omega subtheme).

I love Omega and I think you made a really smart choice basing your subtheme on it. But it's the responsive grid that makes it great! Just my opinion.

Oh - and I'm just naming this css file global.css and I'm storing it in my sites/all/themes/mytheme/css directory.