# CSS doesn't apply on real device

**URL:** <https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313>\
**Category:** Ask for Help\
**Created:** [September 25, 2021, 4:36pm UTC](https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313 "2021-09-25T16:36:29Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [September 25, 2021, 4:36pm UTC](https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313/1 "2021-09-25T16:36:29Z")

</div>

Please guide, is my CSS correctly applied?  
in the Glide builder, the css display is correct as I wanted, but on real devices the changes don’t follow as in the Glide builder.  
my css :

.iwmKFQ .bottom-area {  
display: flex;  
flex-direction: column;  
background-color: rgb(15 160 39 / 35%);  
padding: 40px 12px 12px;  
color: rgb(24 5 184);  
-webkit-box-flex: 1;  
flex-grow: 1;  
}

I attached a screenshot.

Real device

 ![lkjh](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/9/39fbf739cea92b4118728fc290ab94ea85fcd3b4.jpeg)

Builder Glide

 ![Capture](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/3/53dacb2bd739af5be869cb161ddad4f5e22b48d0.png)

I use CSS only to change the color.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [September 25, 2021, 9:06pm UTC](https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313/2 "2021-09-25T21:06:12Z")

</div>

CSS is not working the same on all devices… try to use [Code BOOK App](https://code-book.glideapp.io/) to test codes in real-time… pick the code and click the see it in action button… then change the code button…

---

<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:** [September 25, 2021, 11:33pm UTC](https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313/3 "2021-09-25T23:33:54Z")

</div>

> [@agung\_Taufik](#):
>
> .iwmKFQ

This happened because you are using an unstable class name there. It’s likely that the class name is not the same on your testing device. Please never use those random class names.

Try replacing that with this.

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

[data-test="app-vertical-list"] .bottom-area {
display: flex;
flex-direction: column;
background-color: rgb(15 160 39 / 35%);
padding: 40px 12px 12px;
color: rgb(24 5 184);
-webkit-box-flex: 1;
flex-grow: 1;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/4/c401a5f6706d91fc1c90111605c88882769c67a3.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [September 25, 2021, 11:46pm UTC](https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313/4 "2021-09-25T23:46:00Z")

</div>

@ThinhDinh great sample and clean code

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [September 26, 2021, 12:37am UTC](https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313/5 "2021-09-26T00:37:27Z")

</div>

thanks @ThinhDinh for the guide, this css was successfully implemented in real devices…  
I’m new to CSS, is there a way to learn class names…?

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [September 26, 2021, 12:38am UTC](https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313/6 "2021-09-26T00:38:14Z")

</div>

thanks @Uzo

---

<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:** [September 26, 2021, 12:52am UTC](https://community.glideapps.com/t/css-doesnt-apply-on-real-device/32313/7 "2021-09-26T00:52:25Z")

</div>

You find them using inspect elements. Point the cursor to the element and find a stable class name.