I’m somewhat new to Webflow and I’ve been trying to get this coming soon page on my site to function the way I want. I’m having issues with overall responsiveness and some of my animations and I can’t seem to wrap my head around how to solve it:
The first one is I can’t seem to get the slider to behave the way I’d like. The slider doesn’t properly transition between the different screen resolutions. It just stops and then finally snaps to the placement I want. Then after it settles into places the image doesn’t properly resize either.
The next issue I’m having is a little smaller but it’s with the infinite scrolling text. I can’t seem to get the timing right. As well as how to properly resize it in different resolutions.
If anyone could help me I’d greatly appreciate it!
Hi @Kassius, there’s a bit to unpack here. I think it would be handy to get an idea of where, ideally, you want the slider to be on each of the device views.
I can see what you mean that it does ‘snap’ to different areas, overlaps text etc. however configuring this is a part of the design process. Perhaps it may be worthwhile looking at flex boxes, instead of the columns as you’ve used, as this will give you greater flexibility in where the slider can go and how it operates on each device view.
I’m not sure on the infinite text sorry, neat trick though if you can get it to work. Similarly as above however, I think some further viewport-specific design can help - alternatively you can have individual mobile/tablet specific elements using the “Display” option (i.e. hide the desktop text on tablet/mobile and it can have it’s own one).
Ideally, the layout I’m going for is similar to this site Link
I would want the Slider to function similarly to how their’s does as well as the position of the slider.
Switching to flexbox from columns definitely helped but for some reason, text overlapping continues on the desktop.
By “Viewport-specific design” Do you mean using “vh” and “vw” when adjusting the size instead?