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

HTML & CSS
1

I use this method and it doesn’t work:


@media only screen and (max-device-width : 780px) {

      @import url("morestyle.css");

}

on the styles.css I use this code


@import url("max-device-width-780px.css");

What is the solution to this?

Thanks,

2

To specifically call a stylesheet you need to use the link tag in your HTML, see the below.

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

The @import rule must come first in a style sheet or it will be ignored, as outlined here:

But you could try doing it like so:

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

More info here:

4

Thanks,

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

5

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 :slight_smile:
@import url(index-css.php)