Hidden elements showing anyway in Tablet and Mobile Landscape Mode

Design help General
1

Hi all

I have a carousel/swiper that loads different images when in desktop or mobile mode. These two views seem to be working well, but for some reason BOTH images/carousels are displaying in tablet and mobile landscape mode.

It looks like the display settings are right in Tablet and Mobile Landscape (eg. mobile swiper = none) … can anyone share a fix for this?

Thank you!

Here is my site Read-Only:
https://preview.webflow.com/preview/sandboxcompany?utm_medium=preview_link&utm_source=designer&utm_content=sandboxcompany&preview=77d938d90b7d7897db8d5cf927498f7b&pageId=6448fdfcd9e05e9d6e934f24&workflow=preview

2

On my end, both in Webflow and on the live site, I can only see one slider on each viewport

3

Thanks for taking a look! The issue shows up when you resize the browser window from desktop to mobile - I assume because it’s tracking through the intermediate breakpoints.

4

SwiperJS won’t know that you’re trying to hide/show it at specific breakpoints and that the CSS is changing. Likely it will be overriding that with style attributes as the slides switch.

To solve that, you want to place your breakpoint-specific visibility on a container element of the swiper DIV, rather than the swiper DIV itself.

You already have desktop and mobile classes setup as global classes ( nice work ), so this is easy.

Click your swiper DIV in the navigator, and CTRL+ALT+G to wrap it in a new DIV. Do that for both. On the one wrapping your desktop swiper, assign the class desktop. On the mobile one assign mobile.

I’d also remove those classes from the swiper element just to keep the code clean.

1 Like
5

That worked a treat! Thank you so much!

I really appreciated your step by step instructions.

1 Like