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:
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.
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.
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? 
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?
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
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!
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
Awesome, thank you! This looks promising!
Thanks, this was exactly what I was looking for, too! Works perfectly!
Hi, not working for me! Even with script in the page
:(
sorry, just see your reply. did you manage to fix it in the end?
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!