Fixed height for Google Review section

I’m not sure if this is something that can be changed with CSS or if we need to modify our page section code.

We are using the google reviews widget on a site we’re working on, and it is working great. But the section size gets taller or shorter, depending how many lines are displayed in each review. This makes the page jump up and down a bit for all content following the review section. A fixed height section seems like the answer, but the fixed height would have to also work on mobile, where the reviews display in a “taller” section.

Here is our code:

<!-- Review section start -->
          <section class="section review-section">
              <h2 class="notestitle">Notes From Our Customers</h2>
                  <div class="blueBgD">
			<div class="container"><br><br>
<!-- Elfsight Review section -->
<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-1f1def87-b304-4713-8d76-4b8fdd4b11b0" data-elfsight-app-lazy></div>  
<!-- Elfsight Review section -->
			</div>
				</div>
  </section>

Our coder probably knows the answer to this but I thought I’d ask here in case other folks run into a similar issue.

  • Link to the page with the widget in question:
    This is not live yet but it can be viewed here for now:
    << removed after issue resolved >>
1 Like

Hi @Hugh :wave:

I’ve shared your request with devs. Once they respond, I’ll report back :slightly_smiling_face:

1 Like

We’ve adjusted this behavior by adding this code to the Custom CSS section:

[class*="Carousel__CarouselSwiperWrapper-sc"] .swiper-wrapper {
	min-height: 275px;
}

Please check your website and let me know if the widget works fine now :slightly_smiling_face:

1 Like

Perfect, thank you!

1 Like

No problem :wink: