More surrounding shapes for counters

Wishlist Number Counter
1

Hello,
we would appreciate to have more shapes for counter numbers.
at the moment only a rectangle is possible.
We would like to habe filled circles for showing the counters inside.

1 Like
2

Welcome to Community @user5555 :wave:

I cannot but agree that it would be awesome to have this opportunity right in the configurator. We’ll take your idea under consideration!

As for now, you can use this code to make counters circles:

[class^='Card__Component-sc'] {
  border-radius: 60%;
  width: calc(20% - 30px);
}

[class^='GridProvider__Component-sc'] {
  justify-content: space-between;
}

Add this code to the Custom CSS field on the Style tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

3

Hey thank you very much.

We will try it out.

Another Question: is there a possibility to reduce the padding around the conters und texts. We would like to decrease the margin or padding around.

Thx

image001.jpg

4

Here is the code you can use for this:

[class^='Card__Component-sc'], [class^='Card__ContentDiv-sc']{
  padding: 10px;
}

[class^='Card__Component-sc'] {
  width: 15%;
}

[class^='GridProvider__Component-sc'] {
  justify-content: center;
}
5

Hello,

thank you so much for your quick replies.

I tried it and it works in general very good.

But I need to have different settings für mobile devices an desktop viewports.

Any chance to address this in the css settings because there is only one Style field in the userinterface?

Regards

Thomas

image001.jpg

1 Like
6

Do you mean different counter shapes for mobile and desktop? Or mayve different padding options for mobile and desktop?

7

Different padding options for mobile and desktop

Thx

Beste Grüße
Thomas Pühringer

1 Like
8

Got you!

I’ll talk to our devs and let you know once the solution is provided :slightly_smiling_face:

9

@user5555 Thank you for waiting! To have different padding options on mobile, just add this code after the previous one:

@media(max-width: 808px) {
  [class^='Card__Component-sc'], 
  [class^='Card__ContentDiv-sc'] {
    padding: 35px;
  }
  
  [class^='Card__Component-sc'] {
    max-width: 155px;
  }
}

Check it out and let me know if you like what you see :slightly_smiling_face:

11

Hello Max,

The setting with the circle shapes works on the desktop but different settings for mobile do no not apply somehow.
Tried it with the media settings but did not work.
Seen on CasaComplete.at

Thx for help

Beste Grüße
Thomas Pühringer

1 Like
12

Hi @user5555 :wave:

I’ve shared this info with our devs. I’ll let you know once I receive a response from them :slightly_smiling_face:

13

Hi @user5555 :wave:

We’ve checked things and see that you’ve done everything correctly. Now, the styles are applied based on the screen size.

Could you please confirm if everything is fine on your side?

14

Thx for checking!

We found the solution this morning using an additional @media command.

Thank you

image001.jpg