Streaming live at 10am (PST)

Slider padding and resize issue


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.

Can anyone help me with that?

I created a sample page because I can’t share the project. Here is the public link:
There will be a side navbar on the left and the content on the right.


Hey @Caroline_Magnus,

  1. You have padding on the slider because you defined paddings to the slide element:

    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:

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.

Maybe I don’t understand what it is that you try to do?

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:

I answered this here: