Swiper makes my whole page zoom-out on mobile (only when .swiper-slide is present)
Swiper makes my whole page zoom-out on mobile (only when .swiper-slide is present)
At a glance
A community member is building a page in Webstudio and added a Swiper carousel, but the slides are rendered zoomed-out or shrunken on viewports smaller than desktop. Another community member suggests that the issue may be with the container needing a fixed width, rather than the Swiper elements themselves. The community member who posted the original question confirms that wrapping the Swiper carousel in a div with width: 90vw solved the issue, and thanks the other community member for the helpful suggestion.
I’m building a page in Webstudio and added a basic Swiper carousel via an embed. Desktop looks perfect, but every viewport smaller than desktop is rendered zoomed-out / shrunken (as if the browser were still 980 px wide).
Here is the Code: https://
and here is the published site because in Preview it doesn't change slides: https://
Has anyone run into this? Which CSS rule (or Swiper option) should I override so the slides keep their functionality without breaking the viewport scaling?
Hey @Mikeoxygen – just wanted to say thank you so much for your quick and super helpful reply (even from your phone). You really saved my day – I’ve been stuck on this Swiper scaling issue for ages and your suggestion finally solved it.
Turns out, like you said, the problem wasn’t the .swiper-slide itself but the outer container needing a fixed width. I had only focused on the swiper elements, but wrapping the whole thing with a div with width: 90vw made it work. There are probably other ways, but this did the trick.
I just remembered I replied a thread prev, kindly check that same page, I implemented a slider with swiperjs, you can check it to see what styles similarities and what styles change on viewports change
Hey @Mikeoxygen – just wanted to say thank you so much for your quick and super helpful reply (even from your phone). You really saved my day – I’ve been stuck on this Swiper scaling issue for ages and your suggestion finally solved it.
Turns out, like you said, the problem wasn’t the .swiper-slide itself but the outer container needing a fixed width. I had only focused on the swiper elements, but wrapping the whole thing with a div with width: 90vw made it work. There are probably other ways, but this did the trick.
