# Is this a safe way to target CSS?

**URL:** <https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051>\
**Category:** Ask for Help\
**Created:** [November 5, 2021, 5:42am UTC](https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051 "2021-11-05T05:42:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Malcolm\_Lewis](https://avatars.discourse-cdn.com/v4/letter/m/5f9b8f/32.png) [@Malcolm\_Lewis](https://community.glideapps.com/u/Malcolm_Lewis)\
**Post date:** [November 5, 2021, 5:42am UTC](https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051/1 "2021-11-05T05:42:15Z")

</div>

See screenshot.

Is it safe to assume that I can reference/modify `.kEeglU` in CSS using a rich text component?

I’d like to reduce the horizontal padding a tad so I can squeeze in one more button.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/4/84aa78d56206c50417cd50a66d57f7928c3ebb8a.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 5, 2021, 7:47am UTC](https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051/2 "2021-11-05T07:47:02Z")

</div>

No, that is an unstable class name and you should never use those. Please try to find a more stable one.

What specific element are you targeting here?

---

<div class="post-metadata">

**Author:** ![Malcolm\_Lewis](https://avatars.discourse-cdn.com/v4/letter/m/5f9b8f/32.png) [@Malcolm\_Lewis](https://community.glideapps.com/u/Malcolm_Lewis)\
**Post date:** [November 5, 2021, 11:13am UTC](https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051/3 "2021-11-05T11:13:10Z")

</div>

Horizontal padding for the choice components I’m using as filters.

Eg: All | ToDo | Done

---

<div class="post-metadata">

**Author:** ![Malcolm\_Lewis](https://avatars.discourse-cdn.com/v4/letter/m/5f9b8f/32.png) [@Malcolm\_Lewis](https://community.glideapps.com/u/Malcolm_Lewis)\
**Post date:** [November 5, 2021, 6:52pm UTC](https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051/4 "2021-11-05T18:52:51Z")

</div>

Any suggestions, @ThinhDinh ?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 5, 2021, 11:11pm UTC](https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051/5 "2021-11-05T23:11:07Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/abfedde54b8084ed71685c1dfb4e66114616fe21.jpeg)

I think this is what you want?

```auto
<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) >div :nth-child(2) >div {
padding-right: 0px;
}

```

Change the 1 in nth-of-type(1) to the corresponding order number of choice component on your screen.

Relevant documentation from @Lucas_Pires:

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=502cfbc7cc3b44f4b769e692eca6793d)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<div class="post-metadata">

**Author:** ![Malcolm\_Lewis](https://avatars.discourse-cdn.com/v4/letter/m/5f9b8f/32.png) [@Malcolm\_Lewis](https://community.glideapps.com/u/Malcolm_Lewis)\
**Post date:** [November 6, 2021, 5:41pm UTC](https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051/6 "2021-11-06T17:41:14Z")

</div>

Thanks!

So this is bullet-proof/future-proof as long as my component layout doesn’t change?

Also, how can I test to see if my component choices wrap on other mobile screens? Kinda like the way the Chrome Inspector allows you to preview a screen on different devices?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e5b2a9aba2bf5fc6e284acc5df1339165ecfd9aa.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 6, 2021, 11:14pm UTC](https://community.glideapps.com/t/is-this-a-safe-way-to-target-css/34051/7 "2021-11-06T23:14:00Z")

</div>

> [@Malcolm\_Lewis](#):
>
> So this is bullet-proof/future-proof as long as my component layout doesn’t change?

Yes, that’s true. As you have noticed, this relies on that specific choice components being 1st, 2nd and 3rd on your screen.

I assume you can use Device Mode to simulate it on other devices.

> **[Simulate mobile devices with Device Mode  |  DevTools  | ...](https://developer.chrome.com/docs/devtools/device-mode/)**
>
> Use virtual devices in Chrome's Device Mode to build mobile-first websites.

I also saw this, maybe you can try it.

> **[Mobile simulator - responsive testing tool](https://chromewebstore.google.com/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk)**
>
> Smartphone and tablet simulator on computer with several models to test mobile responsive websites.