CSS changing multiple objects on screen

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.

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

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:

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

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

:nth-of-type(#)

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

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

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.

1 Like