CSS rule indicating working in Service Studio


My  application has a CSS rule that makes the screen looking different when the window's height gets below 800 px. This rule works also when I develop my  application using Service Studio. And this, in turn, makes my project looking different, depending on  the state of the bottom SS panels, whether they are expanded or collapsed.

It is a little annoying, so I'd like to enhance the CSS rule and make it not working when in Service Studio.

So, the question is: is  there a method to recognize (in CSS) whether we are working under control of Service Studio or not?



Check this post


You can use this.

-servicestudio-<Css property Name>: <Property Value>



Hi Tomasz,

there is the opposite thing.

You can create a css property only visible in Service Studio by using:

  •  -servicestudio-<Css property Name>: <Property Value> 

If you can use it in the height to override the general property it should solve your problem.


Hi all,

Being inspired by above posts, I checked whether the HTML, created inside Service Studio, gets some class like "servicestudio" (like "desktop" or 'tablet" when run in a browser) . So, the following rule:

@media (max-height: 800px) {
  :root { ....

I've extended this way:

@media (max-height: 800px) :not(.servicestudio) {
  :root { ....

And it works!

Thanks for the inspiration.



Ups, it only seemed to work :-( 

So, the issue remains open. The rule, I need to modify, defines variables rather than css properties and the suggested solution cannot be directly applied.



Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.