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)