Css display is different on Builder then on actual app

[ohad]

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:

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.

[ThinhDinh]

@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.

[Himaladin]

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

[ohad]

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?

[Himaladin]

@ohad

.[title=“Start/Stop Timer”]{

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

[ohad]

@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?

[Himaladin]

Just copy and paste the code below.

@ohad

[title=“Start/Stop Timer”]

<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);
}

[ohad]

Works! Thank you.

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

[Himaladin]

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%.

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