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
Hi @Rodney18 welcome to community 
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>
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
Hi there, @Rodney18 
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:
Check it out and let me know if it helped 
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?
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
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;
}
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
Hi there, @Rodney18
Please try to use this code instead and let me know if it helped
.global-styles, .es-reviews-images-container {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
Thanks Max, That worked perfectly and is responsive to screen resolution
Super, you’re always welcome 
@Max We started having a problem with these image s not being display correctly again, the images go the width of the column, but the height is very small so that they cannot be viewed, I have attached an example
Here is the custom CSS I am using
.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;}
.global-styles,.es-reviews-images-container {grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
Thanks for any help, Rodney
Hi there, @Rodney18 
Please let me look into this with our devs. I’ll report back once I have any news 
Hi @Rodney18
We’ve adjusted the image appearance on TV screens using this CSS code:
.es-reviews-images-container img {
object-fit: contain;
}
And this script was placed in the Custom JS field on the Settings tab of your widget’s settings:
const WIDGET_ID = '3077cb9f-d16d-480d-bd23-d97c1107bdd8';
const adjustImageGrid = (slide, imageGrid) => {
const authorContainer = slide.querySelector(
'.es-review-author-block-container'
);
const reviewContentContainer = slide.querySelector(
'.es-review-content-container'
);
const offset =
(authorContainer?.offsetHeight || 0) +
(reviewContentContainer?.offsetHeight || 0) +
80 +
380;
imageGrid.style.gridAutoRows = `calc(100vh - ${offset}px)`;
};
const waitForImageGrid = (slide) => {
const imageGrid = slide.querySelector('.es-reviews-images-container');
if (imageGrid) {
adjustImageGrid(slide, imageGrid);
return;
}
const observer = new MutationObserver((mutations, obs) => {
const imageGrid = slide.querySelector('.es-reviews-images-container');
if (imageGrid) {
obs.disconnect();
adjustImageGrid(slide, imageGrid);
}
});
observer.observe(slide, {
childList: true,
subtree: true,
});
};
const swiperObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1) {
const classObserver = new MutationObserver(() => {
if (node.classList.contains('swiper-slide-visible')) {
waitForImageGrid(node);
}
});
classObserver.observe(node, {
attributes: true,
attributeFilter: ['class'],
});
if (node.classList.contains('swiper-slide-visible')) {
waitForImageGrid(node);
}
}
});
});
});
const adjustImageHeight = () => {
const swiper = document.body.querySelector(
`.elfsight-app-${WIDGET_ID} .swiper-wrapper`
);
if (!swiper) {
setTimeout(adjustImageHeight, 250);
return;
}
swiperObserver.observe(swiper, {
childList: true,
});
swiper.querySelectorAll('.swiper-slide-visible').forEach(waitForImageGrid);
};
adjustImageHeight();
Please check your widget and let me know if it’s fine now
@Max Thanks for looking at this, yes that code has fixed my problem, I added that same code to all my Review Widgets
Thanks, Rodney
Awesome, you’re always welcome 
Just a heads-up: to make the script work in other widgets, you should replace the Widget ID in the 1st line with the ID of the needed widget:
