Snipet to reorganize attribute in the block

[zakarya]

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.

[yevhen]

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

[zakarya]

Thank you

[zakarya]

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.

[yevhen]

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.

[zakarya]

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

[yevhen]

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.

[zakarya]

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.

[zakarya]

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

[yevhen]

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

[zakarya]

@yevhen

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

[zakarya]

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.

[yevhen]

Please add also this CSS snippet

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