how to invoke an user defined css style to a dynamic content on Service Portal

[leeching]

Hi, I used the following html code to dynamically call the css on UI Page previously (which works well):

<link rel="stylesheet" type="text/css" href="<sysid of the css record>.cssdbx" media="screen and (mi...

Do you know how I can invoke different css on ServiceNow Service Portal. I tried to include two different CSS into my Service Portal Theme and uses the method above on my widget to call them depending on the media size but it seems that the Service Portal would read the CSS on "Order" basis and ignore the source code above.

Is there a way to dynamically call different CSS on Service Portal?

[joebusuttil · Accepted solution]

Hi Lee, one possible solution is to use a CSS @media query. I've tested this in a Widget on Helsinki.

Add to the CSS-SCSS section of your widget, something like this:

@media only screen and (min-width : 720px) {

  .container   {

  border: 100px solid gray;

}

}

It will look something like this:

Notice when I hide the HTML panel, the widget get's more width, so it passes the @media query condition and different styles are applied.

I hope this resolves your issue.