1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Load Mobile CSS Only for Mobile, Desktop CSS Only for Desktop

Discussion in 'CSS' started by HRA, Jul 27, 2015.

  1. #1
    Hi,

    I have a responsive wordpress site.
    In this site I have two CSS files.
    style.css - for desktops
    style-400 - for mobile devices

    Now no matter what device used (mobile or desktop), it loads both of these CSS files. (I think so because Google PageSpeed Insights shows both of them loaded)

    What I want to do is (one of the following):
    01. Load style.css for desktops only, load style-400.css for mobile only.
    or
    02. Combine both CSS to one CSS (not sure if this is a good approach in terms of mobile page loading speed. Please advise)

    Thanks
     
    HRA, Jul 27, 2015 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    You can try something like:

    
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="only screen and (max-width: 400px)" href="style-400.css" />
    <link rel="stylesheet" media="only screen and (min-width: 401px)" href="style.css" />
    
    
    Code (markup):
    Without <meta name="viewport" content="width=device-width, initial-scale=1"> it may not work well, so it's important to have it there.
     
    qwikad.com, Jul 28, 2015 IP
  3. HRA

    HRA Active Member

    Messages:
    314
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Thanks for the reply. I tried your suggestion, but it still load both files.
     
    HRA, Jul 28, 2015 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    I assumed that your style sheet had the right syntax. It probably doesn't. The thing is, it won't load one "link rel=" at a time. It will load both of them, but your style sheet was supposed to take care of the rest. In your style-400.css file you should have something that looks like:

    @media (max-width: 400px) {
    
    .mobile_css_goes_here {
    }
    
    }
    Code (markup):
    If it doesn't then the aforementioned "link rel="'s are not going to make a diddly squat of difference.
     
    qwikad.com, Jul 29, 2015 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    It's doing what it's supposed to do. It's a cascade; as the UA gets smaller, the @media queries come into play, overriding the selector rulesets as needed. Successive stylesheets should become smaller as fewer rules (generally) need to be changed at each step.

    You do have your links in the wrong order*. Start with the larger screens and work your way down.

    cheers,

    gary

    * Unless you developed your stylesheets in the wrong order, in which case, all bets are off. Two wrongs don't make a right; it takes three lefts. ~g
     
    kk5st, Jul 31, 2015 IP
  6. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #6
    my question is, why you have to use 2 css files? just make it to single files. and make css logic condition using.. @media
     
    huseinbandi, Jul 31, 2015 IP
    qwikad.com likes this.