# CSS from screen to phone

**URL:** <https://community.glideapps.com/t/css-from-screen-to-phone/53301>\
**Category:** Ask for Help\
**Created:** [November 4, 2022, 11:05am UTC](https://community.glideapps.com/t/css-from-screen-to-phone/53301 "2022-11-04T11:05:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 4, 2022, 11:05am UTC](https://community.glideapps.com/t/css-from-screen-to-phone/53301/1 "2022-11-04T11:05:10Z")

</div>

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:

```auto
<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:

 ![Screenshot 2022-11-04 at 10.56.48](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/3/e3c640bfdf6c4cd5431e291b89245240753ee6b5.png)

What i see on my phone

 ![0e036300-277a-4e2d-9810-7c0502fe76a8](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/6/e6f7cf3aa18fb314dc76ead0918310c2dcfe444d.jpeg)

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

---

<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:** [November 4, 2022, 11:08am UTC](https://community.glideapps.com/t/css-from-screen-to-phone/53301/2 "2022-11-04T11:08:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 4, 2022, 11:18am UTC](https://community.glideapps.com/t/css-from-screen-to-phone/53301/3 "2022-11-04T11:18:15Z")

</div>

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

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

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

```

But nothing really changes

---

<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:** [November 4, 2022, 11:20am UTC](https://community.glideapps.com/t/css-from-screen-to-phone/53301/4 "2022-11-04T11:20:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [November 4, 2022, 11:28am UTC](https://community.glideapps.com/t/css-from-screen-to-phone/53301/5 "2022-11-04T11:28:50Z")

</div>

ahhh thats why it looks a little hokey…

---

<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:** [November 5, 2022, 11:29am UTC](https://community.glideapps.com/t/css-from-screen-to-phone/53301/6 "2022-11-05T11:29:37Z")

</div>

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