Need help in calling a stylesheet from a media query

I am trying to call a stylesheet from a media query but cannot do so for some reason. Here is the page in question:

http://www.pabriles.com/home.html

If you look at the media query at the bottom of the homePage.css stylesheet you will see the call to the smallNavBar.css stylesheet. If it were called the h1 font size would be reduced and its background would be green when your browser viewport were reduced to 420px.

Any thoughts or comments are most welcome.

Thanks!

1 Like

Your import call is called within this URL

http://www.pabriles.com/css/homePage.css

So you have this as your import

	@import url('css/smallNavBar.css');

So that means you are calling this file

http://www.pabriles.com/css/css/smallNavBar.css

Is your file there? If not, then you want this as your import

	@import url('/css/smallNavBar.css');
1 Like

@RyanReese
Thanks for your suggestions. I tried that (and changed it on my server) and that does not work either. I am wondering if it is even possible to call a stylesheet from with a media query??

Thanks for your help.

Try also validating your homepage.css file. You have some key errors that could be messing up the page.

http://www.pabriles.com/css/homePage.css

If you notice, it’s not the import that’s not just working.

The header h1{} has a rule set that should be setting it to a red background. That’s not even being registered. Your validation errors are probably the cause of issue now. Go validate and come back once it’s validated.

Yes you can; don’t worry about it :slight_smile: .

Hi,

Import rules in a stylesheet must precede all other rules in that stylesheet or they are ignored. That means you can’t call them at the bottom of the stylesheet and calling it at the top would do no good because the rules would be over-written.

Why are you importing it there anyway as you are just incurring another http request. Put the styles in the actual page inside the media query and don’t import anything.

@PaulOB
Since my last post I have been able to enable a stylesheet based on browser width. This was accomplished by placing a link between the head elements and not in the media query which was what I was orginally trying to do.

I had tried this earlier, but it did not work. I was using (max-device-width: 480px), but when I tried simply (max-width: 480px), it worked. I thought both queries meant the same thing, but I guess I was wrong.

Thanks for your help.

Yes you can use the link element to call your media query specific stylesheet but is generally not recommended as you create another http request and you always have to remember to have it in the right place in the html or the cascade will overwrite it again. It’s much better to put your media queries in the stylsheet to begin width and place it at the appropriate place.

However it is perfectly valid to have the extra link element and if you find it easier this way then that’s fine. Generally I never do that or have never found the need to do that in last few hundred sites I’ve done in the last few years :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.