Equal slide height based on the tallest slide

Hi everyone,

I am looking for a way to make all slides to be equal height based on the tallest slide.
Currently all slides are different height, wondering if there is a workaround?

Here is the link to the actual site which I am currently working on:

https://pattrn.webflow.io/home-new#3rd


Here is my site Read-Only:

https://preview.webflow.com/preview/pattrn?utm_medium=preview_link&utm_source=designer&utm_content=pattrn&preview=29c8bdf4598b581361ed5e2d5dd0b153&pageId=642bfb253a20ea5dfa8972e9&workflow=preview

The issue you’ve described appears to be resolved. Did you fix it? All slides have the same height on my end. Maybe I’m not understanding the issue.

1 Like

Hi,
Thanks for your reply. I forced the slides to be min height of 500px, but it’s not ideal.
I want all slides to be as tall, as the tallest slide.
Is there a way of doing this without defining fixed height?

In other words, the issue still remains.

1 Like

Your min height assignment (based on your tallest slide) seems to clear up any issue with the tiles fluctuating in size. What is the issue you’re facing, that a non-fixed-height will solve? Is the problem that the slide content will be CMS managed, and potentially can break the layout? In this case, I would set a max number of characters so that your client can’t break the layout.

So I have removed min height and now it’s visible where the problem is. I want all the cards to be same height based on the tallest card, which in this case is “Data Analytics as a Service”.

So the content defines how tall will be the tallest slide and the rest of the slides should be same height. Does this make sense? :slight_smile:

Not possible since the slides are individual elements and you cannot set a flexbox property on the mask element to tell the smaller slide heights to “stretch”.
The native slider component doesn’t offer a vertically responsive option so I’ve always used fixed height. I liked your min. height approach and I’m trying to imagine how a flex stretch option would deliver a better look.
It does make sense if the slide content was controlled through the CMS and the content was unpredictable. In your instance it doesn’t seem to matter.

Surely there’s a better solution here? I’ve been working in Webflow for years and still struggle with this. Client goes and edits copy in a slider and max heights cut content off. It’s a struggle that there should be an easy enough solve for?

1 Like

It is possible with a custom JavaScript.
Here is the code:

function setEqualHeight() {
    let slides = document.querySelectorAll('.services-slider_slide');
    let maxHeight = 0;

    // Reset all slides to their natural height before calculating the tallest slide
    slides.forEach(slide => {
        slide.style.height = '';
        if (slide.offsetHeight > maxHeight) {
            maxHeight = slide.offsetHeight;
        }
    });

    // Set all slides to the height of the tallest slide
    slides.forEach(slide => {
        slide.style.height = maxHeight + 'px';
    });
}

// Run the function initially
setEqualHeight();

// Re-calculate heights on window resize
window.addEventListener('resize', setEqualHeight);

// If you have other components or scripts that might change the content or structure
// of your slides dynamically (e.g., an image carousel), you may want to call
// setEqualHeight() again after those changes occur to ensure heights remain consistent.

You can see the code in action here: New Business Startup | NUVO Accounting

5 Likes

Freaking awesome, man. I had some issues in the past with the sliders and testimonials. This kinda made me use the slider element more often.

Why webflow can’t fix this annoying issue?

Hi, @Eugene_Soch. Are you able to explain where you add this script and how to get it to work? I have a site which I am building for a client and have tried numerous times but cannot figure out the right way of use your script. @cataleen if you can share, too, that would be great. Thanks, guys!

https://preview.webflow.com/preview/testing-slider-height-fix?utm_medium=preview_link&utm_source=dashboard&utm_content=testing-slider-height-fix&preview=44bfcaf90ed6c1a6c46ab7f244589bf4&workflow=preview

Hi @BrandedBull , please see the cloneable.

It uses a tiny script, which identifies the tallest slide and then sets every single slide to match the height.

EUgene

2 Likes

Awesome, thank you! This looks promising!

Thanks, this was exactly what I was looking for, too! Works perfectly!

1 Like

Hi, not working for me! Even with script in the page
:(

https://preview.webflow.com/preview/multimold-stage?utm_medium=preview_link&utm_source=designer&utm_content=multimold-stage&preview=d2717d798d9d41c604d193e35343f63f&pageId=665874feb4276f3bba5dc6bd&locale=en&workflow=preview

sorry, just see your reply. did you manage to fix it in the end?

@Roberto_Coladomenico

The code is working. In case you have difficulty on the implementation, here is the guide.

Insert this code to “head”, you may found the bottom of page level setting

<script>
function setEqualHeight() {
    // replace your element css name to .services-slider_slide
    let slides = document.querySelectorAll('.services-slider_slide');
    let maxHeight = 0;

    // Reset all slides to their natural height before calculating the tallest slide
    slides.forEach(slide => {
        slide.style.height = '';
        if (slide.offsetHeight > maxHeight) {
            maxHeight = slide.offsetHeight;
        }
    });

    // Set all slides to the height of the tallest slide
    slides.forEach(slide => {
        slide.style.height = maxHeight + 'px';
    });
}



// Re-calculate heights on window resize
window.addEventListener('resize', setEqualHeight);

// If you have other components or scripts that might change the content or structure
// of your slides dynamically (e.g., an image carousel), you may want to call
// setEqualHeight() again after those changes occur to ensure heights remain consistent.

</script>

insert below code in “body”

<script>
// Run the function initially
setEqualHeight();
</script>

I love this, thank you!

Hi everyone, unfortunately the code doesn’t work if I use CMS slider attributes by Finsweet.

Any ideas how to bypass this?

Read only link:
https://preview.webflow.com/preview/equal-heights-2830a8-72802a5537f228717a?utm_medium=preview_link&utm_source=designer&utm_content=equal-heights-2830a8-72802a5537f228717a&preview=79114348b7ef4d34db122017f14562e2&workflow=preview

Published site:
https://equal-heights-2830a8-72802a5537f228717a.webflow.io/

@lukaszociepka - I would add a class to the collection item, set it to flex, align-items to stretch, and a fixed height which will make the children (.w-slide ) stretch to the height of the parent.

Then I would set the height to auto on .slide_wrapper which will make it take the height of its content.

1 Like

Thank you @webdev , but it doesn’t seem to work :frowning: