Change CSS Style – Category Filter

[BenjaminGo]

Hi,

i would like to change the css of the category filter.
I have choose checkbox and now i would like to style it like a button.

Is this possible?
you can find the map and filter here: https://b3774v.myraidbox.de/referenzen/

Thx 🙂

Attachments:

You must be logged in to view attached files.

[Steven]

Hi there,

Thank you so much for getting back to us.

Could I kindly ask you to remove the following custom CSS from your custom CSS field?

.wpgmza_cat_checkbox_item_holder {
margin-bottom: 30px;
padding-bottom: 30px;
border: 1px solid;
display: flex;
padding: 20px 20px 20px 20px;
}

Once complete, kindly paste the following custom CSS:

.wpgmza_checkbox {
position:absolute;
visibility:hidden;
opacity:0;
}
.wpgmza_cat_checkbox_item_holder input[type=checkbox] + label {
color: #f4f4f3;
font-style: italic;
background: #2099cc;
margin: 5px;
padding: 5px;
border-radius: 2px;
}
.wpgmza_cat_checkbox_item_holder input[type=checkbox] + label:hover {
background: #032955;
cursor: pointer;
}
.wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked + label {
background: #032955;
}
.wpgmza_cat_checkbox_item_holder {
display: flex;
}

Please then click save and kindly let me know if this aesthetic was what you are aiming for?

I look forward to hearing back from you.

Kindest Regards,
Steven De Beer

[BenjaminGo]

thank you very much 🙂 it works 🙂

and how can i erase the automatic number behind the word?

Ausbau (3) <- This (3)

Thank you 😉

[BenjaminGo]

and one thing 🙂 How could it be responsive? among each other and not next to each other when its responsive. Now it comes a scrolling bar.

thx 🙂

[Steven]

Hi again,

Thank you so much for getting back to me.

It seems you managed to remove the quantity count, is this correct?

Could I kindly ask you to add the following CSS in addition to the previous CSS?

@media only screen and (max-width: 795px) {
.ct-section-inner-wrap {
padding-left: unset;
padding-right: unset;

}
.wpgmza_cat_checkbox_item_holder input[type=checkbox] + label {
margin-right: 0px;
width: 100%;
margin-bottom: 5px;

}
.wpgmza_cat_checkbox_holder {
max-height: unset;
}
.wpgmza_cat_checkbox_holder ul:first-child {
display: block;
}
}

Kindly confirm once complete?

Kindest Regards,
Steven De Beer

[BenjaminGo]

yes – it works. thank you very much! 🙂

[Steven]

Hi there,

Thank you so much for getting back to me.

I am glad to hear this has helped.

Do have a great weekend ahead!

Kindest Regards,
Steven De Beer

[Author]

Posts