Join the Webstudio community

Updated 5 months ago

swiper not responsive

At a glance

The community member is having trouble making a Swiper library slider responsive. They have tried various approaches, such as wrapping the slider in a box and applying padding, but the slider either gets pushed off the screen or goes all the way to the edge. The community members have shared project links and discussed the issue, but there is no explicitly marked answer. The main points are:

- The slider works fine when first inserted on a blank page, but becomes unresponsive when placed in a container with padding.

- The community members have tried starting from a blank project, but the issue persists.

- One community member suggests the slider may not be made responsive out of the box and was only tested in one breakpoint.

- Another community member notes that the slider works well when using the one from the marketplace, implying the issue may be with the specific implementation.

- The community members recommend starting over from scratch if the issue persists, as they don't have time to debug the specific implementation.

- Eventually, a community member finds that the issue is resolved by not wrapping the slider in a box and instead applying the padding directly to the slider.

Useful resources
Hi, I would like to use swiper from the library but no matter what I do it is just not responsive. Can you please hgelp me?
Attachment
Screenshot_2024-09-08_154148.png
J
O
22 comments
does it work when you first insert the template on a blank page?
yes, and as soon I put it in the box and apply some padding on left and right it starts to push to the right (respecting only the left padding)
Not sure what you are doing, maybe record a video
and share a project link
it has afixed width defined in the template 740px
its not made responsive
on the container thatholds the content
not sure what you mean.. Have I done something wrong? I have started a blank projest with no styling at all and it behaves the same...
no, its just not made responsive out of the box, it was only tested in one breakpoint
ok, thank you
no I am wrong, I just opened the one from marketplace, it works well
seems like you did something there
recommend starting over from scratch, don't have time to debug what you did, if that happens again, then lets look
I did start from zero in th enew project but it is the same.. I wrapp the slider in a box and apply 5% or 50px padding on both sides and it gets pushed of the screen right away.. It works only if you dont wrap it. But then it goes all the way to the edge of the screen.
It is nothing that needs to be urgent. I am just learning and playing with it so if someone has the time to see how can it be done I would be greatfull.
so, I have tried putting the padding without wrapping the content in the box and it works fine
looks like it needed a defined width on that box, because currently Content holds the fixed width prob there is a better way but I just did this quickly
Attachment
image.png
Add a reply
Sign up and join the conversation on Discord