# Useful CSS Stuff

**URL:** <https://forum.inductiveautomation.com/t/useful-css-stuff/95414>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 1:58am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414 "2024-09-02T01:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 42

<div class="post-metadata">

**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\
**Post date:** [October 21, 2025, 12:17pm UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/42 "2025-10-21T12:17:47Z")

</div>

So I finally used media query to handle mobile stuff. But rather than do it on the individual items, I used it to set rem at the html level and it seems to be working pretty well that way. A 4x multiplier got things sized pretty decently (including those darn handles on docks).

```python
/* Set rem */
/* Mobile first - gets a 4x multiplier to the large screen size */
html {
    font-size: calc((1vw / 19.2) * var(--base-font-size) * 4);
}
@media (min-width: 640px) {
    html {
        font-size: calc((1vw / 19.2) * var(--base-font-size));
    }
}

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/useful-css-stuff/95414)._