# More options for mobile styling

**URL:** <https://community.elfsight.com/t/more-options-for-mobile-styling/139799>\
**Category:** Customization\
**Tags:** number-counter\
**Created:** [September 18, 2025, 1:35pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799 "2025-09-18T13:35:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kris\_the\_Illusionist](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kris_the_illusionist/32/52198_2.png) [@Kris\_the\_Illusionist](https://community.elfsight.com/u/Kris_the_Illusionist)\
**Post date:** [September 18, 2025, 1:35pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/1 "2025-09-18T13:35:01Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 18, 2025, 2:18pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/3 "2025-09-18T14:18:04Z")

</div>

Greetings and welcome aboard, @Kris_the_Illusionist 👋

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/b/db9f785ec70e505d222f2f39b1393457647b3603.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/e/9ef6a8a74bc52bb206cac5ab0298bc12fe0d5f29.png)

  

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

---

<div class="post-metadata">

**Author:** ![Kris\_the\_Illusionist](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kris_the_illusionist/32/52198_2.png) [@Kris\_the\_Illusionist](https://community.elfsight.com/u/Kris_the_Illusionist)\
**Post date:** [September 18, 2025, 3:06pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/4 "2025-09-18T15:06:10Z")

</div>

Hey Max! Thanks for the quick answer! 🙂

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

Thanks once again!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 18, 2025, 3:15pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/5 "2025-09-18T15:15:26Z")

</div>

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!🎁](https://community.elfsight.com/t/september-contest-best-ai-feature-ideas-win-6-months-free/139325)

Check the details and join in 😉

---

<div class="post-metadata">

**Author:** ![Kris\_the\_Illusionist](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kris_the_illusionist/32/52198_2.png) [@Kris\_the\_Illusionist](https://community.elfsight.com/u/Kris_the_Illusionist)\
**Post date:** [September 18, 2025, 3:51pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/6 "2025-09-18T15:51:43Z")

</div>

Thanks! Sounds great! 🙂

---

<div class="post-metadata">

**Author:** ![Kris\_the\_Illusionist](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kris_the_illusionist/32/52198_2.png) [@Kris\_the\_Illusionist](https://community.elfsight.com/u/Kris_the_Illusionist)\
**Post date:** [September 18, 2025, 3:59pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/7 "2025-09-18T15:59:11Z")

</div>

Ah, going back to the topic 🙈

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/6/862f1b4139517952bbf82968c117774090050e08.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 18, 2025, 4:32pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/8 "2025-09-18T16:32:27Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Kris\_the\_Illusionist](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kris_the_illusionist/32/52198_2.png) [@Kris\_the\_Illusionist](https://community.elfsight.com/u/Kris_the_Illusionist)\
**Post date:** [September 18, 2025, 4:49pm UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/9 "2025-09-18T16:49:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 19, 2025, 11:20am UTC](https://community.elfsight.com/t/more-options-for-mobile-styling/139799/10 "2025-09-19T11:20:06Z")

</div>

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 🙂

```auto
@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;
  }
}

```