Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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