Cannot override flex-basis on listing attribute columns with Custom CSS

[Arthur]

Hello,

On the desktop view of my listings page, the attributes in each listing card are in two columns, but I want them to be in a single column. Initially I also had the same issue on mobile view, but I managed to fix it with this code:

body.home .hp-listing–view-block .hp-listing__attributes \[class\*=“hp-col-”\],
.post-type-archive-hp_listing .hp-listing–view-block .hp-listing__attributes \[class\*=“hp-col-”\] {
flex-basis: 100% !important;
max-width: 100% !important;
width: 100% !important;
padding-right: 0 !important;
margin-bottom: 6px !important;
}

However, when I tried to replicate the same for bigger screens, the trick didn’t work.

I’ve used the browser inspector and found in “Styles” that the same rule in grid.min.css is causing the two-column layout:

media only screen and (min-width: 75em) {
.hp-col-lg-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
}

I have tried to override it with the following code in ‘Additional CSS’, but it has no effect:

.post-type-archive-hp_listing .hp-listing–view-block .hp-listing__attributes–secondary .hp-col-lg-6 { flex-basis: 100% !important;
max-width: 100% !important;
}

I have cleared all caches and confirmed there are no syntax errors. Live-editing the flex-basis and the max-width to 100% in the browser inspector works perfectly, but the ‘Additional CSS’ rule is being ignored.

Can you please tell me the correct selector or method to override this style? Thank you.

[Arthur]

Hey @kseniia ,

Thanks for referring the other topic. The code proposed seem to be for single-listing page. I could also use that (because the attributes also appear on two columns there), but my main issue here was how they look on the general listings page (where the user sees all cards/blocks of individual listings).

However, after a bit of trial and error, I discovered the culprit - the attributes were set to be displayed in the “block (secondary)” area. which seems to put them on two columns by default. In order to have them on only one column, I moved all of them to “block (ternary)” and now it looks fine. Maybe this will also help others.

Thanks!

[kseniia]

Sorry for the misunderstanding.

You can also consider this snippet [change page to block]:

.hp-listing--view-block .hp-listing__attributes--secondary .hp-col-lg-6{
    flex-basis:100%;
    max-width:100%;
		-ms-flex-preferred-size: 100%;
}