Streaming live at 10am (PST)

Slider ratio does not stay at 1:1


#1

Hello,

I am new to webflow and have a small design problem. I checked all similar issues in the forum but did not find a solution.

I have 4 sliders in a row with different product pictures, all 1:1. However, when set to auto the slider resizes to a rectangular size. The background is then visible on one side of the picture. When I fix the slider size to 350 x 350 px the sliders overlap each other, of course.

I am sure there is an easy solution but I simply cannot find it.

Here is the link, it is about the page “Baby Sonnenbrillen”
https://preview.webflow.com/preview/activesol?preview=d704e3f1bd7253f4e5737daa8dae9ba0

Thanks a lot for our help!

Regards
Christof


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


#2

Start from zero - you create endless styles/flexbox grids and tricks for very simple layout (No way to solve this by Forum Q). About overlap don’t use px width for cols (you set 400px X 4slides ---- what happen when the screen is 1000px width?) - use %

About flex - you need flex-container only for the grid - and maybe for the arrows (Not for “image and text below” or any layout)

Try this (The image fill up the parent div + save aspect ratio)

width: 100%;
height: auto;

If you set the width of the image to 350px again (350px X 4 > 1000px)


#3

OK, thanks for the suggestions. It is the first time I use weblow, I will try to make it more simple next time.


#4

Hi again,

I tried to make the layout more simple and it also worked so far. However, my main problem stilll exists. The slider becomes rectangle even though the content pictures are square.

I like to have a responsive layout but even if I set an absolute size there is a slice of the next or another picture visible on mobile devices. I am pretty sure that there must be something like a simple checkbox that I am missing but I cannot find it.

You can see it on the page “Baby-Sonnenbrillen”.

Thanks again for your help!
Christof


#5

The Webflow native slider does not have an auto height response to the content inside. It will size the entire widget to your tallest slide. The trick is to make your slide layouts uniform in size.