Custom CSS : condionnaly changes the padding settings of a collection item

[lighthama]

Good morning Weweb community!

I have a column component (listings) displaying my listing (listing) two-by-two on each row. I want to control the padding according to the listing position.

I’m looking to sets for each first item a

padding-left: 0px; padding-right: 10px;

and for each second item

padding-left: 10px; padding-right: 0px;

Assuming we are using a collection-based structure, it’s not possible to control the listing behavior independently.

I tried the following approach using odd and even below :

/* Set padding for the first item in each row */

.listings .listing:nth-child(even) {
padding-left: 0px;
padding-right: 10px;a
}

/* Set padding for the second item in each row */

.listings .listing:nth-child(odd) {
padding-left: 10px;
padding-right: 0px;
}

I copied the snippet on the custom CSS editor (right side panel) of the listing element before pushing it live, but unfortunately, nothing changed.

Also, when I copied the snippet into the custom CSS editor if a clicked somewhere else and I return into the custom CSS editor, the code appears to be completely destroyed

custom CSS editor after click

I would appreciate a little bit of advice on this use case please

Thank you !

Listings component

Listing item

[aurelie]

Hey,
Best will be to bind your padding to a formula, and inside the formula use the context index to set the value

[lighthama]

Hello @aurelie,

Thank you very much. It works perfectly.

[lighthama]

Here it’s the solution proposed by @aurelie :

[benFortunato]

I’m having a similar issue on the CustomCSS panel. I tried a really simple test. I created a div, gave it the #id myDiv and then entered the following code in the Custom CSS editor

#myDiv:hover{
background-color:blue;
}

Once I click somewhere else in the page I the CSS changes. It looks like its some sort of autocorrect? How do I use the Custome CSS component? Is it meant to be an inline style so I need to follow the inline syntax?

[benFortunato]

It looks like the custom CSS elment only accepts CSS properties for that element in the syntax

cssproperty: value;
cssproperty2: value2;

I’ve asked how we can select different id’s and child elements here: How to add backdrop-filter to custom CSS - #3 by benFortunato

I found this confusing as well. It would be good to have a little information button explaining how this custom CSS component works.