# CSS changing multiple objects on screen

**URL:** <https://community.glideapps.com/t/css-changing-multiple-objects-on-screen/53821>\
**Category:** Ask for Help\
**Created:** [November 10, 2022, 8:37pm UTC](https://community.glideapps.com/t/css-changing-multiple-objects-on-screen/53821 "2022-11-10T20:37:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 10, 2022, 8:37pm UTC](https://community.glideapps.com/t/css-changing-multiple-objects-on-screen/53821/1 "2022-11-10T20:37:13Z")

</div>

I’m using this CSS to make an image gallery, but the CSS also changes the inline list. How can I prevent this from happening? I was thinking of maybe some “:nth-child(1.)”. But I can’t seem to figure this out.

CSS: [Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=4c7c6ef3b0664e49b05430899968a676&pm=c)

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

.scroller {
    display: block !important;
    columns: 2;
    padding: 0px 12px 0px 12px;
    pointer-events: none;
}

.scroller > div {
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 8px;
}

</style></span></pre>

```

 ![Screenshot 2022-11-10 at 21.33.35](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/4/34ca5da40202166f69a1c4737c10e417e6ee81e6.png)

---

<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:** [November 10, 2022, 11:49pm UTC](https://community.glideapps.com/t/css-changing-multiple-objects-on-screen/53821/2 "2022-11-10T23:49:04Z")

</div>

> [@Alexander\_Rubino](#):
>
> I was thinking of maybe some “:nth-child(1.)”.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/Styling-by-Component-order-in-the-Screen-502cfbc7cc3b44f4b769e692eca6793d)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 11, 2022, 7:10am UTC](https://community.glideapps.com/t/css-changing-multiple-objects-on-screen/53821/3 "2022-11-11T07:10:10Z")

</div>

This is what I have already tried, but then the scroller doesn’t work. The list gets created from an image, the image values come from an array of images.

New Code:

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

div[id*='screenScrollView'] > div > :nth-of-type(4) {
    display: block !important;
    columns: 2;
    padding: 0px 12px 0px 12px;
    pointer-events: none;
}

div[id*='screenScrollView'] > div > :nth-of-type(#) {
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 8px;
}

```

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

---

<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:** [November 12, 2022, 1:30am UTC](https://community.glideapps.com/t/css-changing-multiple-objects-on-screen/53821/4 "2022-11-12T01:30:57Z")

</div>

Is it the 3rd or 4th component on your screen?

> :nth-of-type(#)

Why do you have this # instead of a number here?

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 12, 2022, 8:17am UTC](https://community.glideapps.com/t/css-changing-multiple-objects-on-screen/53821/5 "2022-11-12T08:17:38Z")

</div>

In the actual post, I had the number 4. But I have chosen to just go with a tiles list vies.

But have you found a solution for your countdown timer?  
The post: [Custom countdown - #50 by Alexander\_Rubino](https://community.glideapps.com/t/custom-countdown/38574/50)

---

<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:** [November 12, 2022, 10:16am UTC](https://community.glideapps.com/t/css-changing-multiple-objects-on-screen/53821/6 "2022-11-12T10:16:06Z")

</div>

Sorry, I haven’t had the time to look more into it. If anyone else can direct you to the right solution in that thread, it’d be great.

Also, please don’t message me privately if the solution can be a collective effort by the community. I might not have enough time to respond, so asking questions publicly might give you a bigger chance to get the right answer. There are loads of great people here.