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
  • January 22, 2015 at 7:53 pm #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

    January 22, 2015 at 7:54 pm #194043
    santafe
    Participant

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

    January 23, 2015 at 2:47 am #194054
    Paulie_D
    Member

    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.

    January 23, 2015 at 8:01 am #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

}
    January 23, 2015 at 8:12 am #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.

    January 23, 2015 at 8:22 am #194087
    Paulie_D
    Member
    @media (min-width:500px) {

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

}

    Well, you learn something every day..:)

    January 23, 2015 at 8:28 am #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. :)

    January 23, 2015 at 8:33 am #194090
    Paulie_D
    Member

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

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

    January 23, 2015 at 8:38 am #194092
    santafe
    Participant

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

    January 23, 2015 at 9:31 am #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!

    January 23, 2015 at 9:37 am #194095
    Paulie_D
    Member

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

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

    January 23, 2015 at 9:37 am #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).

    January 23, 2015 at 9:50 am #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.

    January 23, 2015 at 10:10 am #194098
    Paulie_D
    Member

    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 ^^

    January 23, 2015 at 10:12 am #194099
    santafe
    Participant

    @Paulie_D

    Got it! Thanks.

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