All-In-One Reviews Display on TV FullScreen

Ask the Community Customization
1

  • Issue description: I am using the All-In-One Reviews Widget to display Google Reviews on a TV in our Office, I am using the sharable link on a Fullscreen web browser on the TV, how can i make the background of the body black the same as the widget, and can I set the max width and height of the widget? so that long reviews do not go off the page **

  • Link to the page with the widget in question: https://d9136f0c48a5417b94ae1cdc5ef3288f.elf.site

Thanks for any help
Rodney Stauffer

1 Like
3

Hi @Rodney18 welcome to community :clap:

Maybe switch the browser to dark mode or a black theme ?

The widget is in the <body>your widget code</body>
The background must therefore be set for the body tag.

<style>
body {
  background: black;
}
</style>
1 Like
4

Hello Sina

I tried adding that CSS code into the Custom CSS on the Widget settings but that did not make any difference, I also tried setting the browser to be dark mode but that did not make any difference either

image
image698Ă—650 34.5 KB

Screenshot 2025-05-22 132645
Screenshot 2025-05-22 1326453746Ă—1905 246 KB

1 Like
5

Hi there, @Rodney18 :waving_hand:

You’d like to stretch the black background to the full width and height, so that there wouldn’t be a white background when opening a Share Link, right?

If this is the case, and you’re using the widget inly through the Share Link, please add this code to the Custom CSS field on the Style tab of your widget’s settings:


.global-styles,
body {
  padding: 0 !important;
}

.es-main-content
.swiper,
.es-main-content
.swiper-slide {
  height: calc(100vh - 37px - 80px - 32px - 175px - 56px) !important;
}

[class*='WidgetBackground__Wrapper-sc'] {
  height: 100vh;
  overflow: hidden;
}

If the long reviews cut off, please adjust the Preview Text Length setting:

image
image331Ă—620 18.7 KB
image
image327Ă—760 14.1 KB


Check it out and let me know if it helped :slightly_smiling_face:

2 Likes
6

Thanks Max, That is what I needed for the background, any idea on how to make the images in the review be the width of the column?

20250523_194853006_iOS
20250523_194853006_iOS1920Ă—1440 137 KB

7

I actually fixed the image size by using the following css code

.global-styles, [class^='MediaContainer__Container-sc'] {
  width: 300px !important;
  height: 100% !important;
}

Thanks
Rodney

2 Likes
8

Hi @Rodney18

why not min-width: 100% Px are static
If the resolution of the TV changes, the width may no longer fit

.global-styles, [class^='MediaContainer__Container-sc'] {
  min-width: 100% !important;
}
2 Likes
9

Hi Sina
I had tried setting the min-width to 100% but that did not make any difference on the image width, only when I set the width to be a static size did the width of the image change, then I needed to add the height 100% to make the aspect ratio correct, I would prefer to not use a static size for the width but I could not get it to work without using that?
Thanks, Rodney

1 Like
10

Hi there, @Rodney18 :waving_hand:

Please try to use this code instead and let me know if it helped :slightly_smiling_face:

.global-styles, .es-reviews-images-container {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
1 Like
11

Thanks Max, That worked perfectly and is responsive to screen resolution

2 Likes
12

Super, you’re always welcome :wink: