Responsiveness issues in custom sliders

Design help General
1

Hello Webflow Community,

I am a new user of the Webflow Designer and I am currently trying to create a FeverUp clone with this tool. I am facing some difficulties with the responsiveness of the website along the whole range of screens. Actually, I tried to copy the CMS Carousel Sliders of Timothy Ricks and put my card event design in it. However, I am not able to achieve what I want. The card are always a little offset from the center and there is too much gap between them. And for the categories slider (the one with rounded corners colored buttons) there is also a problem with the centering and the size of the buttons.

I am using some custom code to create the slider so you will have to check it.

I am really trying to make it look like FeverUp so you can go check the website to see the final result I need. I would also like to have the arrows appear only on big screens and over the sliders with transparency.

ScreenSmall.PNG
ScreenSmall.PNG477×893 111 KB

ScreenMedium.PNG
ScreenMedium.PNG968×867 85.4 KB

ScreenBig.PNG
ScreenBig.PNG1416×880 129 KB

SliderArrows.PNG
SliderArrows.PNG1593×411 81.4 KB

Thank you really much for your help.

Here is my site Read-Only: LINK

2

Hey hey,

I’ve noticed that you use mostly fixed unit sizes in your layout. This will make responsive designs harder than they need be!

I’d suggest checking out the webflow uni for some more insight:

If I’d be designing such a slider like yours I’d orient myself first with this video:

3

Thank you again for your help, I will look at the Youtube video and see what I can do with it !

1 Like