SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    How do you include external css file inside the @media only screen block

    I use this method and it doesn't work:
    Code:
    @media only screen and (max-device-width : 780px) {
    
          @import url("morestyle.css");
    
    }
    on the styles.css I use this code
    Code:
    @import url("max-device-width-780px.css");
    What is the solution to this?

    Thanks,

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    To specifically call a stylesheet you need to use the link tag in your HTML, see the below.

    Code CSS:
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 780px)" href="max-device-width-780px.css" />

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The @import rule must come first in a style sheet or it will be ignored, as outlined here:

    http://reference.sitepoint.com/css/at-import

    But you could try doing it like so:

    @import url(morestyle.css) screen and (max-device-width: 780px);

    More info here:

    http://reference.sitepoint.com/css/mediaqueries

  4. #4
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    That looks very promising. I'll give them a try.

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks from me too ralph. I knew I'd seen something like that before. I was hoping to use something like that to load dynamic stylesheets from static ones
    @import url(index-css.php)
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •