Mobile stylesheet

The CMS Questions
1

Hello,
I’m trying to have multiple stylesheets in my header for the mobile and desktop versions of a website.

I’m using the syntax I found on the doc, but somehow, I can’t manage to make it work…
Might but something simple…

   <?= css('assets/css/1.css', ['media' => 'screen', 'min-width' => '500px'],
            'assets/css/2.css', ['media' => 'screen', 'max-width' => '500px']
    ) ?>

Thanks a lot for the quick help

2

Your syntax is wrong, you have to pass multiple items as an array. But in this case if you want to assign individual options per stylesheet, you have to call them all separately:

All stylesheets with same options:

<?= css(['assets/css/1.css', 'assets/css/2.css'], ['media' => 'screen', 'max-width' => '500px']) ?>

Each stylesheet with different options:

<?= css('assets/css/1.css', ['media' => 'screen', 'min-width' => '500px']) ?>
<?= css('assets/css/2.css', ['media' => 'screen', 'min-width' => '800px']) ?>
3

Thanks texnixe,
This option doesn’t seem to work…
actually, is this the correct way to do it?
Is there a better way to charge different stylesheets depending on the screen width?
Thanks.

4

Is the width attribute even supported in a link tag?

5

not really,
it’s working like that:

<?= css('assets/css/style.css', ['media' => 'screen and (min-width:500px)']) ?>
<?= css('assets/css/mobile.css', ['media' => 'screen and (max-width:500px)']) ?>

my second question would be, is this the correct way to do it?
Is there a better way to load different stylesheets depending on the width of the window?

Thanks