Responsive slider height on mobile


I’m having some issues with the height of my slider, as it’s on auto and takes the height of the longest slide. Every slide contains a grid with articles from that month, so the content for each slide is a different amount.

So the slides with less content have this huge empty space at the bottom I can’t seem to get rid of. Has anyone had a similar issue and how would you go about fixing it?

The articles are originally CMS items, but I had to share this page only and separated it from the rest of the website. So even if you have any ideas involving collection lists opposed to a slider or custom code regarding the height I’m all ears - In the end I just want to get rid of the empty space.

Thanks in advance!! I’ve read trough so many forum entries, but found nothing so far.
Read-only link below.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Unfortunately I have a similar issue and am also looking for a solution, so instead of writing another post, I will piggyback on this thread. I hope that’s OK.

I would even be willing to manually adjust each slide, but having negative 2000+ px margins and a lot of combo classes just for the cause seems quite dumb to me (hey, I’m the dumb-user over here), frankly. Of course, automation would be the best (without an additional code just because my plan would not support it).

Especially due to the last requirement, the solution offered in this thread did not suit me. And that was suggested almost around 2 years ago.

Here’s my link: Webflow - Tarvo Metspalu

Hey, sharing my workaround if it’s in any way helpful :slight_smile:

Instead of a slider I decided to remake this using tabs - a tab for each image in your case. With reusing the already made styles for each element it was a rather quick fix.

After inserting the tabs component add pagination and limit the items per tab to 1. To be sure they’ll always be in the right order you could add a Sort Order “Date, Newest to Oldest”. You can also hide the tabs menu if you don’t need it. All of the settings you might need are in the right panel, under the gear icon.


Hey Diana,

In case you want a solution to that, this is what worked for me, maybe not ideal but it does the job. I made all other slides that are not showing to 0px height so that the Mask will adapt to the actuals slide and here’s the solution:

.slider [aria-hidden=“true”] {
height: 0px;

Hope it helps