# Css display is different on Builder then on actual app

**URL:** <https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324>\
**Category:** Ask for Help\
**Created:** [January 31, 2024, 1:43pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324 "2024-01-31T13:43:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ohad](https://avatars.discourse-cdn.com/v4/letter/o/f04885/32.png) [@ohad](https://community.glideapps.com/u/ohad)\
**Post date:** [January 31, 2024, 1:43pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/1 "2024-01-31T13:43:39Z")

</div>

Hi, I am using the Classic apps with the stopwatch component.  
I am using CSS to hide the STOP native button and adjust the location of the PAUSE/START native button.  
On the builder it works great! exactly as is should.  
On the actual app on the phone the CSS does not work. (Tried on 4 devices).

See image:

 ![WhatsApp Image 2024-01-31 at 15.39.09_27fc95f3](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a2864bbc3b77ed0b5103dc65213af39cd42b2e22.jpeg)

This it the code:

```
.timer-container \> svg { display: none !important; } .timer-container { height: 10px !important; } [title="Reset Timer"], [title="Stop Timer"] { display: none !important; } \*\*///This is the code for the Pause/start button location///\*\* .fENlpL { position: relative; left: 90px; top: 45px; opacity:5; transform: scale(1.7); z-index:2; } Thank you.
```

---

<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:** [January 31, 2024, 3:01pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/2 "2024-01-31T15:01:02Z")

</div>

> [@ohad](#):
>
> `.fENlpL`

This is likely the problem. You’re using an unstable class name and it’s highly likely your other devices don’t use the same class name. The fix is to find a way to target that class more reliably.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [January 31, 2024, 3:11pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/3 "2024-01-31T15:11:24Z")

</div>

Yes, as ThinhDinh said. You may try replacing it with [title=“Start/Stop Timer”]

---

<div class="post-metadata">

**Author:** ![ohad](https://avatars.discourse-cdn.com/v4/letter/o/f04885/32.png) [@ohad](https://community.glideapps.com/u/ohad)\
**Post date:** [January 31, 2024, 3:21pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/4 "2024-01-31T15:21:29Z")

</div>

Hi , Do you mean :

.[title=“Start/Stop Timer”]{  
position: absolute;  
right: 10px;  
top: 35px;  
opacity:5;  
transform: scale(1.7);  
z-index:2;  
}

That did not work.

How can I find the right class name?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [January 31, 2024, 3:25pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/5 "2024-01-31T15:25:00Z")

</div>

> [@ohad](#):
>
> .[title=“Start/Stop Timer”]{

You put an unnecessary dot in front of [title=“Start/Stop Timer”]

---

<div class="post-metadata">

**Author:** ![ohad](https://avatars.discourse-cdn.com/v4/letter/o/f04885/32.png) [@ohad](https://community.glideapps.com/u/ohad)\
**Post date:** [January 31, 2024, 3:53pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/6 "2024-01-31T15:53:33Z")

</div>

> [@Himaladin](#):
>
> [title=“Start/Stop Timer”]

Hi, Changed it to:

```
.timer-container \> svg { display: none !important; } .timer-container { height: 10px !important; } [title="Reset Timer"], [title="Stop Timer"] { display: none !important; } [title=“Start/Stop Timer”] { position: relative; left: 1px; top: 45px; opacity:5; transform: scale(1.7); z-index:2; } Still did not work. Edit: Not working on the builder, I did not try it on the actual app. Maybe on the builder it wont work but on the app it will?
```

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [January 31, 2024, 4:01pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/7 "2024-01-31T16:01:41Z")

</div>

Just copy and paste the code below.

> [@ohad](#):
>
> `[title=“Start/Stop Timer”]`

```auto
<pre><span><style>
.timer-container > svg {
 display: none;
}

.timer-container {
 height: 100px !important;
}
[title="Reset Timer"], [title="Stop Timer"] {
 display: none !important;
}

[title="Start/Stop Timer"] {
  position: absolute;
  left: auto;
  right:30px;
  top: 80px;
  opacity:0.8;
  transform: scale(1.7);
}

```

---

<div class="post-metadata">

**Author:** ![ohad](https://avatars.discourse-cdn.com/v4/letter/o/f04885/32.png) [@ohad](https://community.glideapps.com/u/ohad)\
**Post date:** [February 1, 2024, 11:45am UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/8 "2024-02-01T11:45:45Z")

</div>

Works! Thank you.

I am trying to change the size of the button, opacity does not work, what is the right “command” for it?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 1, 2024, 12:24pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/9 "2024-02-01T12:24:01Z")

</div>

I changed the class name slightly if you want to change the button properties. You can use width or height, transform-scale if you want to increase the size of the button and icon together.  
Opacity has a value of 0-1 or 0-100%.

```auto
button[title="Start/Stop Timer"] {
  position: absolute;
  left: auto;
  right:30px;
  top: 80px;
  background-color: red;
  transform:scale(1.0);
  width:70px;
  height:35px;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [February 8, 2024, 12:24pm UTC](https://community.glideapps.com/t/css-display-is-different-on-builder-then-on-actual-app/70324/10 "2024-02-08T12:24:39Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.