# Customization of the floating badge

**URL:** <https://community.elfsight.com/t/customization-of-the-floating-badge/110914>\
**Category:** Customization\
**Tags:** google-reviews\
**Created:** [April 2, 2025, 1:55pm UTC](https://community.elfsight.com/t/customization-of-the-floating-badge/110914 "2025-04-02T13:55:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![user22560](https://avatars.discourse-cdn.com/v4/letter/u/9de0a6/32.png) [@user22560](https://community.elfsight.com/u/user22560)\
**Post date:** [April 2, 2025, 1:55pm UTC](https://community.elfsight.com/t/customization-of-the-floating-badge/110914/1 "2025-04-02T13:55:51Z")

</div>

Can we have this style with only one star badge?  
However if the click on the badge i have to see the review with 5 stars not only 1.

thanks in advance

---

<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:** [April 2, 2025, 2:30pm UTC](https://community.elfsight.com/t/customization-of-the-floating-badge/110914/2 "2025-04-02T14:30:49Z")

</div>

Hey there, @user22560 👋

You’d like to show only 1 star on mobile only, right?

---

<div class="post-metadata">

**Author:** ![user22560](https://avatars.discourse-cdn.com/v4/letter/u/9de0a6/32.png) [@user22560](https://community.elfsight.com/u/user22560)\
**Post date:** [April 2, 2025, 2:46pm UTC](https://community.elfsight.com/t/customization-of-the-floating-badge/110914/3 "2025-04-02T14:46:51Z")

</div>

yes with round border without “x” to close it  
Thanks

---

<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:** [April 2, 2025, 2:59pm UTC](https://community.elfsight.com/t/customization-of-the-floating-badge/110914/5 "2025-04-02T14:59:26Z")

</div>

Rounded borders and hidden close button only for mobile, or for the desktop view as well?

---

<div class="post-metadata">

**Author:** ![user22560](https://avatars.discourse-cdn.com/v4/letter/u/9de0a6/32.png) [@user22560](https://community.elfsight.com/u/user22560)\
**Post date:** [April 3, 2025, 7:36am UTC](https://community.elfsight.com/t/customization-of-the-floating-badge/110914/6 "2025-04-03T07:36:35Z")

</div>

only for mobile

---

<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:** [April 3, 2025, 1:25pm UTC](https://community.elfsight.com/t/customization-of-the-floating-badge/110914/7 "2025-04-03T13:25:02Z")

</div>

This code should do the trick 🙂

```auto
@media (max-width: 500px) {
	[class*='LayoutSidebar__Inner-sc'] [class*='BadgeContainer__Inner-sc'] {
		margin-left: 0px;
		border-radius: 20px;
	}
	[class*='LayoutSidebar__Inner-sc'] [class*='Rating__Container-sc'] {
		flex-direction: column;
	}
	[class*='LayoutSidebar__Inner-sc'] [class*='RatingValue__Container-sc'] {
		margin: 0 !important;
	}
	[class*='LayoutSidebar__Inner-sc'] [class*='BadgeTotalReviews__Content-sc'] {
		display: none;
	}
	[class*='LayoutSidebar__Inner-sc'] [class*='RatingBar__Container-sc'] {
		flex-direction: column;
	}
	.es-rating-item:not(:first-child) {
		display: none;
	}
    .es-close-button {
        display:none;
    }
}

```