Slider padding and resize issue

Design help General
1

Hello!

I’m having 2 problems with my slider.
1- For some reason it has a side padding that I didn’t set and can’t get rid of.
2- I would also like the slider to resize horizontally on different desktop screen sizes, but when I resize the screen the slider stays the same. If I set the photo mask with “display:none” the problem is solved, but I need the photo there and don’t know what else to do.

image
image1215×651 138 KB

Can anyone help me with that?

I created a sample page because I can’t share the project. Here is the public link:
https://preview.webflow.com/preview/slidertest-1?utm_source=slidertest-1&preview=a1b4eeec2b3698692504771013298aad
There will be a side navbar on the left and the content on the right.

Thanks

2

Hey @Caroline_Magnus,

  1. You have padding on the slider because you defined paddings to the slide element:
    04
    04482×1010 44.1 KB

    To remove them, simply click on the numbers (40/20/40/20) and reset or set it to 0.
  • pay attention to the flex justify you gave (centre) which will make all the elements away from the sides. That might look like padding.
  1. You gave the slide width of 100% and also some of it’s parents. This makes them take as much space as possible. They take up 900px wide since you gave the content div maximum width of 900px.
    Once you give the content div any other width property, it will all scale to the same size:
    23
    232514×1170 263 KB
3

Thanks for de reply!

I added all those settings wile trying to fix the problem. But even if I take everything off, it stays the same.

image
image1593×696 175 KB

4

Maybe I don’t understand what it is that you try to do?
https://www.useloom.com/share/3c0561f0872a4d8bbd99ec5aad3581b7

5

I’m trying to make the slider resize on different screens without being cut.
On a 1024px screen it doesn’t appear fully.

It only actually resizes when I hide the photo. :disappointed:

6

I answered this here: