CSS from screen to phone

[KPT]

This is my first Glide app so it’s my first published app. I got dragged a little into the CSS-realm to stylise my app a little (And I know it’s not officially supported), but now some of this customisation seems to not work on my phone.

The main bit is have quite alot of stylised choice components set to chips - centred and then give them all an equal width - using the following css:

<pre><span><style>
.hyLuov {
margin: auto !important;
}

.epQbSL .size-item {
width: 50px;
text-align: center !important;
}

I suspect it has to do with classnames as they look alittle dodgy, but it was what I found when inspecting the elements

What I see on my computer screen:

What i see on my phone

Does anyone know how to centre these chips and get them equal size?

[Uzo]

target that element with left calc() % and find the right syntax for mobile

[KPT]

I’m not sure how you mean (Still learning css).
I looked up on stack overflow and tried something like:

<pre><span><style>
.hyLuov {
margin: auto !important;
}

.epQbSL .size-item {
width: 50% !important; 
left: calc(50% / 2) !important;
}

But nothing really changes

[Uzo]

you are targeting names, not class…or ID… names only will work on your own App… find it by inspecting the browser

[KPT]

ahhh thats why it looks a little hokey…