Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How do you call a stylesheet from a media query?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #194042
    santafe
    Participant

    I have placed a link between my <header> elements, but it has not worked. I have also tried this from within my media query and that did not work either.

    Any thoughts or comments will be much appreciated.

    Thanks,
    Phillip

    #194043
    santafe
    Participant

    I tried to post the link in my original post but was booted out for a ‘security’ reason. Not sure why.

    #194054
    Paulie_D
    Moderator

    You can use Codepen for raw code if the forum won’t let you post it in the thread.

    Basically, however, you can’t call (AFAIK) a separate stylesheet within a media query…nor should you need to.

    You place the alternative code itself inside the media query.

    #194077
    Senff
    Participant

    Instead of this in styles.css:

    @media (min-width:500px) {
    
        @import url('other-styles.css');
    
    }
    

    And this in other-styles.css:

    // All kinds of other styles
    

    You can just use this in styles.css:

    @import url('other-styles.css');
    

    And then have this in other-styles.css:

    @media (min-width:500px) {
    
        // All kinds of other styles
    
    }
    
    #194084
    santafe
    Participant

    @Senff
    Thanks so much for your help. I have tried most of what you have posted, but must be doing it incorrectly. In your third example, are you suggesting that I place that snippet in styles.css’ media query? Or should it be placed at the top of the style sheet? I have read that certain style elements must be placed prior to any CSS style else it will be ignored due to the cascade. I could be wrong about this.

    I have tried leveraging a style sheet based on certain width criteria and between the header elements and it is ignored. I am stuggling to incorporate a different nav menu for mobile devices by triggering a different style sheet when a width of 480px is detected, but have failed thus far.

    Thanks again.

    #194087
    Paulie_D
    Moderator
    @media (min-width:500px) {
    
        @import url('other-styles.css');
    
    }
    

    Well, you learn something every day..:)

    #194089
    Senff
    Participant

    In your third example, are you suggesting that I place that snippet in styles.css’ media query? Or should it be placed at the top of the style sheet?

    Well, I only posted two examples…. but the point is that you don’t call an external stylesheet in a media query, but that the media query is in the external stylesheets that you call.

    Well, you learn something every day..:)

    That was actually an example of what DOESN’T work. :)

    #194090
    Paulie_D
    Moderator

    I have placed a link between my <header> elements,

    Do you mean inside the &lt;head&gt;?

    #194092
    santafe
    Participant

    @Paulie_D
    Yes, sorry for that. I meant the betweem the head HTML elements.

    #194094
    santafe
    Participant

    @Senff & Paulie_D

    Here is the page in question: http://www.pabriles.com/home.html

    In my homepage.css I have a media query which uses (at)import to call my smallNavBar.css style sheet. This does not work. If this stylesheet were called the h1 font-size would be reduced to 0.3em and the background-color: would be green when the viewport is reduced to 420px.

    So I am not sure where I am going wrong here.

    Thanks!

    #194095
    Paulie_D
    Moderator

    Why do you have it in twice in two different variants?

    …and it’s been a while but aren’t they commented out?

    #194096
    Senff
    Participant

    Is it because you have it in <!-- and --> tags, or is that just for testing?

    Also, maybe try (max-width: 480px) instead of (max-device-width: 480px).

    #194097
    santafe
    Participant

    @Paulie_D and Senff

    Ok, sorry for the confusion.

    I think you were viewing the links between my head elements. Those were commented out and yes, they were for testing purposes only. What I have done is to place my @import to my smallNavBar.css stylesheet in my @media query which is at the bottom of the homePage.css stylesheet. The only acive line in the media query is the @import call. This is never called because if it were the h1 font size would be reduced to 0.3em and the background color would become green when the viewport was reduced to 420px.

    I hope this makes sense. Thanks.

    #194098
    Paulie_D
    Moderator

    In my homepage.css I have a media query which uses (at)import to call my smallNavBar.css style sheet.

    As Senff said above…that does not work.

    See his suggestion ^^

    #194099
    santafe
    Participant

    @Paulie_D

    Got it! Thanks.

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.