# Style Limitations

**URL:** <https://forum.inductiveautomation.com/t/style-limitations/45263>\
**Category:** Ignition\
**Tags:** ignition80\
**Created:** [April 5, 2021, 2:38pm UTC](https://forum.inductiveautomation.com/t/style-limitations/45263 "2021-04-05T14:38:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![m.boog](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@m.boog](https://forum.inductiveautomation.com/u/m.boog)\
**Post date:** [April 5, 2021, 2:38pm UTC](https://forum.inductiveautomation.com/t/style-limitations/45263/1 "2021-04-05T14:38:31Z")

</div>

Hi All,

I’m working in Perspective, Gateway 8.0.16.

I have a hopefully basic Style question.

I tried to apply 4 media queries to a container, so that it would cycle between 4 background colors based on width. I used 3 Max-Width media query styles, set to 3 different widths: 600, 800, and 1000 pixels. I then applied the 4 four styles to a container. The container changes background color as it is sized, but I can’t get more than 2 styles to become ‘active’ and change the background color at the correct width. It looks like either A) Ignition limits you to only 2 media queries or B) the style order as typed in the property window (see image) isn’t being honored.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/c/8c3fdc3fc06a1be7aa518d5aa79f18a5b26c9bb1.png)

Is either one of these possible?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![m.boog](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@m.boog](https://forum.inductiveautomation.com/u/m.boog)\
**Post date:** [April 5, 2021, 2:46pm UTC](https://forum.inductiveautomation.com/t/style-limitations/45263/2 "2021-04-05T14:46:09Z")

</div>

I should've searched through one more forum article - the answer is to name styles alphabetically in the order of precedence.

> [@Perspective class precedence](http://forum.inductiveautomation.com/t/perspective-class-precedence/37892):
>
> v8.0.15 When you specify two class styles for a style.classes prop, how is precedence determined? I have two classes that i’ve specified, however both classes have a background fill defined that are difference. I want to use one of them, however I’ve tried changing the order of the classes but I’m only getting the background colour of the other class. [image] I want the background colour from DeviceStates/Faulted, but am getting the one from Buttons/Body