Slider Image scaled down mobile

Design help General
1

Hello Webflow-Community,

I’m currently working on a new project right now, and came across a problem, that I can’t solve by myself.

I have integrated a slider element, that shows a preview of a few sites of a book.

Bildschirmfoto 2023-05-31 um 17.37.59
Bildschirmfoto 2023-05-31 um 17.37.59378×770 135 KB

If the dimensions of the slider remain the same, I was able to set specific dimensions for the book pages so that they filled the entire slider. In the mobile view, however, I set the size of the slider in percentages. Here I cannot specify a specific size for the image of the book page and have therefore set it to 100% width and hight.

Unfortunately, this setting does not work here and there is a gap at the bottom of the book pages, as you can see on this picture:

Bildschirmfoto 2023-05-31 um 17.38.15
Bildschirmfoto 2023-05-31 um 17.38.15337×594 21.6 KB

Please ignore the mistakes in the mobile version, I’m not finished yet and working on the details.
But maybe someone here who has more experience than me, can give me a helpful advice.

I look forward to your feedback and thank you in advance.

Best regards
Alice

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

2

Looks like the smallest viewport changes from pixel height to percentage. Included a video of the steps

Also, the gray box you see in the bottom corner is a drop shadow on the previous slide. You could probably just remove that and be done.

3

Hej, thank you for your help Port_of-Folio.
I followed your steps and have adjusted the size of the Slider to the size for 320 px screensize. But actually I wanted the Slider to adjust to the screesize as it gets bigger. But I wll leave it like that now.
Thank you!

4

Unfortunately, the native Webflow slider component is not vertically responsive in relation to the content inside. You’d need to use an embed slider method.