Expand my Community achievements bar.

SOLVED

Clientlibs, Media Queries and Sighlty

Avatar

Level 3

Hi,

is it possible to add css media queries with sightly and clientlibs functionality?

The result should be:

    <link rel="stylesheet" href="https://forums.adobe.com/etc/designs/website/clientlibsDesktop.min.css" type="text/css"/>
    <link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 800px)" href="https://forums.adobe.com/etc/designs/website/clientlibsTablet.min.css" type="text/css"/>
    <link rel="stylesheet" media="screen and (max-width: 599px)" href="https://forums.adobe.com/etc/designs/website/clientlibsMobile.min.css" type="text/css"/>

 

Its ease to get the first line:

<head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

    <link data-sly-call="${clientLib.css @ categories='clientlibsDesktop'}" data-sly-unwrap/>

</head>

 

But how can I add the media queries to the next two lines?

 

regards

Reinhard

1 Accepted Solution

Avatar

Correct answer by
Employee

Reinhard-

When using clientlibs, you want to put the media series inside the CSS files.

Regards,

Justin

View solution in original post

1 Reply

Avatar

Correct answer by
Employee

Reinhard-

When using clientlibs, you want to put the media series inside the CSS files.

Regards,

Justin