Need help centering containers inside a slider

[Teamsieo (Matthew)]

Hey all!

Im having a difficult time centering my containers withing a slider on my page. As of now the only way I can center it is to use padding/margin but this results in different positions on different screen sizes.

I tried to turn my slider into a flex box and then center my container vertically/horizontally but that essentially breaks the slider (they turn grey and stack on top of each other).

Please help!

---

Here is my public share link: sieo.webflow.io]
(how to access public share link)

[lblampman (Les)]

Hi Teamsieo,

There are a few pieces of the puzzle with sliders. They come “pre-bundled”, as it were, with the Slider Wrapper (the main box that holds everything), the Mask, and then (by default) two Slides.

I’m not sure what you’re trying to center where but I’ll take a stab at this. All your content that ends up on a slide will be on the Slide itself, not on the Mask or controlled by the Slider Wrapper (my name for the main box that holds everything). For myself, I never control the content of an individual slide by changing the attributes of a Slide itself but rather I place a content wrapper (a div) on the slide and then I use the content wrapper to manipulate the content.

My thought is that since I’m likely to have multiple slides within the Slider component, they should all be the same and not manipulated at all. I literally never give them a class, attributes, or styling, that all happens within the content wrapper div (and maybe some positioning/sizing attributes on the Slider (main box). In other words, the Mask and Slides are “off limits” for changes.

I too “broke” a lot of Sliders before I figured out that I shouldn’t mess with the Slides. I use a lot of Flexbox (in general), and it works fine on the Slides as long as the content is in a wrapper that’s used as the parent for the start of the Flexbox items.

Hope this helps out in your situation.

[Teamsieo (Matthew)]

Hey Iblampman,

Thanks for the response! All that feedback really helped a lot, however were still having the same centering issue. Ive attached some screen shots to give you some context.

cid:A146BEA7-8269-482B-80B4-F414A7D28C89@chapman.edu

The first image shows the content centered on a smaller res screen which is fine, but on bigger display’s my container has too much space on the bottom, as seen on the screen shot below.

cid:15956E51-3419-4E8A-A791-976C8B1F98E3@chapman.edu

So basically I have no idea how to center content on a slider both vertically and horizontally and ensure that it stays that way through out every screen size (Desktop through mobile).

I hope I was more clear this time and I look forward to your response!