More options for mobile styling

Ask the Community Customization
1
  1. It would be great to have the possibility to put icon, counter and description of a counter element into row on mobile. They are currently set in column, which sometimes doesn’t look that good and takes much of the vertical space.
  2. Possibility to add vertical space between counter elements

Thank you :slight_smile:

3

Greetings and welcome aboard, @Kris_the_Illusionist :waving_hand:

Glad to say that you can display all counters in 1 row using an option in the Mobile settings of the widget:

image
image330×512 8.86 KB

image
image1371×642 18.3 KB


As for the vertical spacing, do you mean the padding between the icon and counter value?

4

Hey Max! Thanks for the quick answer! :slight_smile:

Yes, I meant on that, although I don’t need it anymore since it looks good to me at this moment when adjusted the content into row. And yes, my bad for that, I missed it somehow in the settings. :slight_smile:

Thanks once again!

5

Great, you’re always welcome!

By the way, we’d like to invite you to participate in our September Contest, where you can win a 6-month extension for your subscription - September Contest: Best AI Feature Ideas Win 6 Months FREE!:wrapped_gift:

Check the details and join in :wink:

6

Thanks! Sounds great! :slight_smile:

7

Ah, going back to the topic :see_no_evil_monkey:

This would be cool to have as an option for the mobile view as well! :slight_smile:

image
image408×244 2.04 KB

8

I’ll discuss if it’s possible to make the counter values look neat on mobile with 3 columns using this layout. I’ll report back once I have any news :slightly_smiling_face:

9

Thanks, I appreciate! I mean, I could do this with custom css, but it’s not so clean to select those “long” css classes :slight_smile:

10

Thank you for waiting!

Please add this code to the Custom CSS field on the Style tab of your widget’s settings and let me know if you like the result :slightly_smiling_face:

@media (max-width: 480px) {
  [class*="GridProvider__Component-sc"] {
    flex-direction: row;
    overflow: visible;
  }
  
  [class*="Card__Component-sc"] {
    width: 30%;
    margin: 0 !important;
    margin-inline: auto !important;
  }
  
  [class*="Card__CardContent-sc"] {
    overflow: visible;
    position: relative;
    flex-direction: column;
    gap: 8px;
  }
  
  [class*="Counter__CounterComponent-sc"] {
    position: absolute;
    transform: translateY(-32px);
    top: 0;
    right: 0;
  }
  
  [class*="Main__Component-sc"] {
    overflow: visible;
  }
}