Snipet to reorganize attribute in the block

Hello,

Here is How are shown attributes in the Primary Block section :

I find this not really convinient to read and I wanted to reduce a bit the font size and put one attributes per line.

Does someone has already some snippet to reorganize this and make it more pleasant to read ?

Thanks in advance.

Cordially, Zak.

Please try this CSS snippet to change the font size for attributes and place each attribute one per line but please note that it can require further customization

.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute{
    font-size: 10px;
    flex-basis:100%;
    max-width:100%;
}

.hp-listing--view-block .hp-listing__attributes--primary{
    flex-wrap:wrap;
}
1 Like

Thank you

I did a personalisation for the secondary block, however when I quite the personalisation menu of WordPress it disabled :

Do you have any clue ?

Thanks by advance, Zak.

If you added & saved custom CSS in Appearance/Customize but it’s not reflected on the website front end then it’s most likely a caching issue.

I empty the cache but nothing changed. Are my code well ?

Unfortunately, we can’t debug third-party customizations, but you can try validating it here The W3C CSS Validation Service and try adding the !important keyword to enforce the CSS rule.

I think the problem is on the number of column. Even if iI set it to 1 in the CSS, it remains 2 columns :

Any clue ?

Thx, Zak.

This is what happen when it is set up on 3 columns for example.

Please try this CSS snippet

.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute, .hp-listing--view-block .hp-listing__attributes--secondary .hp-col-lg-6{
    flex-basis:100%;
    max-width:100%;
}

.hp-listing--view-block .hp-listing__attributes--primary{
    flex-wrap:wrap;
}

It works, thanks a lot.

1 Like

Hello,

I tried the same CSS for the vendor block but it is not working. Any clue ?

Thanks in advance.

Btw, if you have any clue how to transform the display of the instagram url into a text or an image I will be very please to know.

Thanks in advance, Zak.

Please add also this CSS snippet

.hp-vendor--view-block .hp-vendor__attributes--primary{
    flex-wrap: wrap;
}