# Customization of Reviews badge
**URL:** https://community.elfsight.com/t/customization-of-reviews-badge/74325
**Category:** Customization
**Tags:** all-in-one-reviews
**Created:** [October 7, 2024, 4:06pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325 "2024-10-07T16:06:25Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@Sina](https://community.elfsight.com/u/Sina)
#### Post date: [October 7, 2024, 4:06pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/1 "2024-10-07T16:06:25Z")
Hi Helga, this CCS code was helpful when the site is scroll down to bottom of the page.
Then the footer is hidden on mobile screen.
The Badge a little bit smaller is no realy the solution for me.
i need now the funktion it recognizes that it has scrolled down.
```auto
@media(max-width: 480px) {
[class*="BadgeContainer__Inner"] {
transform: scale(0.75);
}
.es-badge-container {
transform: scale(0.75);
transform-origin: left bottom;
}
}
```
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 7, 2024, 4:24pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/2 "2024-10-07T16:24:18Z")
@Sina I am afraid I don’t quite understand your idea. Could you please describe in more detail what you’d like to achieve?
A screenshot with the expected result would be appreciated 🙂
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 7, 2024, 6:01pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/4 "2024-10-07T18:01:44Z")
Got it, thanks!
I’ll discuss it with the devs and will get back to you tomorrow 🙂
---
### Author:  [@Sina](https://community.elfsight.com/u/Sina)
#### Post date: [October 7, 2024, 6:15pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/5 "2024-10-07T18:15:09Z")
sorry my english is bad to describe everything technically.
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 7, 2024, 6:24pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/6 "2024-10-07T18:24:13Z")
That’s no problem, I’ve completely got your idea 😉
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 8, 2024, 12:04pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/7 "2024-10-08T12:04:20Z")
Hi, @Sina 👋
If I got it right, you don’t like that the badge covers the footer when scrolling down. Our devs suggested using the code making the badge scrollable only before the footer:
```auto
(() => {
const FOOTER_SELECTOR = 'footer2';
const isMobile =
/android|webos|iphone|ipad|ipod|blackberry|windows\sphone/i.test(
navigator.userAgent
);
if (!isMobile) {
return;
}
const waitForElem = (selector) =>
new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(() => {
if (document.querySelector(selector)) {
observer.disconnect();
resolve(document.querySelector(selector));
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
waitForElem('.es-badge-container').then((badge) => {
const footer = document.querySelector(FOOTER_SELECTOR);
const updateBottomOffset = () => {
const viewportHeight = window.innerHeight;
const footerRect = footer?.getBoundingClientRect();
const overlap = viewportHeight - footerRect?.top;
badge.style.bottom = `${overlap > 0 ? overlap : 0}px`;
};
updateBottomOffset();
window.addEventListener('scroll', updateBottomOffset);
});
})();
```
Please add this code to the Custom JS section on the Settings tab of your widget’s settings and let me know if you like the result 🙂
However, if the suggested solution doesn’t work for you, we’ll try our best to customize the widget to change its position only when reaching the footer.
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 8, 2024, 12:56pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/9 "2024-10-08T12:56:44Z")
Great! You are always welcome 🙂
Regarding your suggestion, I think it’s more of a custom case. For some users, it’s perfectly fine if the badge covers part of the footer.
However, if anyone prefers a different setup, we’d be happy to offer a custom solution!
---
### Author:  [@Cory\_Borman](https://community.elfsight.com/u/Cory_Borman)
#### Post date: [October 22, 2024, 1:44am UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/10 "2024-10-22T01:44:38Z")
Hi, I’m having a similar issue where I’d like the same effect as Sina. I’m using Squarespace 7.1, and I copied and pasted the code thinking that it might work for me too, but to no avail. What would it take to customize the code to work for my site? I’ve attached an image to show what’s happening. [https://www.swoonlearning.com/](https://www.swoonlearning.com/)
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 22, 2024, 7:48am UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/12 "2024-10-22T07:48:43Z")
Hi there, @Cory_Borman 👋
We’ve adjusted the mobile view of your widget by adding this code to the Custom CSS field on the Style tab of your widget’s settings:
```auto
.global-styles,
body:has(.sqs-mobile-info-bar:not(.sqs-mobile-info-bar-hide))
.es-badge-container {
margin-bottom: 70px;
}
```
Please check your website and let me know if it’s fine now 🙂
---
### Author:  [@Cory\_Borman](https://community.elfsight.com/u/Cory_Borman)
#### Post date: [October 22, 2024, 2:18pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/13 "2024-10-22T14:18:16Z")
Looks wonderful! Thank you so much 😊
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 22, 2024, 2:25pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/14 "2024-10-22T14:25:08Z")
Great! You are always welcome 😉
By the way, we’d like to invite you to join our new challenge. This time, you should create a slogan for Elfsight to win a **6-month extension** to your subscription.
Check the details and join in: [October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)](https://community.elfsight.com/t/october-challenge-create-slogan-for-elfsight-and-win-6-free-months-2-weeks-guaranteed/74883)
We’ll be super happy to see you as a participant 😉
---
### Author:  [@Cory\_Borman](https://community.elfsight.com/u/Cory_Borman)
#### Post date: [October 31, 2024, 2:31am UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/15 "2024-10-31T02:31:49Z")
Hi, can the Yelp badge be hidden when a user accesses the mobile menu?
---
### Author:  [@Sina](https://community.elfsight.com/u/Sina)
#### Post date: [October 31, 2024, 9:19am UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/16 "2024-10-31T09:19:53Z")
Hi,
try out with.
```auto
display: none;
```
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 31, 2024, 10:58am UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/17 "2024-10-31T10:58:33Z")
Hi there, @Cory_Borman 👋
Do you want to hide the widget only in this specific menu section, or you don’t want to display the widget on mobile at all?
---
### Author:  [@Cory\_Borman](https://community.elfsight.com/u/Cory_Borman)
#### Post date: [October 31, 2024, 3:01pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/18 "2024-10-31T15:01:23Z")
Only in this specific menu section
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [October 31, 2024, 3:53pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/19 "2024-10-31T15:53:15Z")
Thanks!
I’ve passed your request on to the devs and will get back to you tomorrow 🙂
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [November 1, 2024, 11:25am UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/20 "2024-11-01T11:25:26Z")
Hi there, @Cory_Borman 👋
We’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:
```auto
.es-badge-container {
z-index: 9;
}
```
Check it out and let me know if it worked for you 🙂
---
### Author:  [@Cory\_Borman](https://community.elfsight.com/u/Cory_Borman)
#### Post date: [November 1, 2024, 1:57pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/21 "2024-11-01T13:57:36Z")
Works beautifully, thank you 🙏 so much!!!
---
### Author:  [@Max](https://community.elfsight.com/u/Max)
#### Post date: [November 1, 2024, 2:13pm UTC](https://community.elfsight.com/t/customization-of-reviews-badge/74325/22 "2024-11-01T14:13:44Z")
Great, you are most welcome 😉
In the meantime, we’d be so grateful if you could look through the [Yelp Reviews](https://community.elfsight.com/c/wishlist/yelp-reviews/113) category on the Wishlist and upvote the ideas you like.
There are not so many requests in Yelp Reviews category, so you are very welcome to check [All-in-One Reviews](https://community.elfsight.com/c/wishlist/all-in-one-reviews/55) category (many ideas are common for all Reviews widgets).
Your feedback will greatly helps us set priorities right 🙂