Issue with slide view on horizontal view mobile

https://preview.webflow.com/preview/wedowe?preview=29e2c3714ef52ba50a39515a3723699d

can someone help me with this. can’t seem to get it right, all the other views of this are fine though.


Here is my public share link: LINK
(how to access public share link)

What are you wanting to happen there? My view looks different from what your screen grab looks like, too. Fonts, spacing, etc.

It looks like the slides are swallowed up, So I want the slides to be visible.

Well this is console viewer for different devices.

It’s hard for me to tell since I can only operate in pre-view mode when testing. Can’t review on my phone. With that said, I see the slider “banner” is set to 100% height and the mask has a vertical offset and the slides themselves have no setting. I think this combination of settings is causing the gap.

I typically set the main slider container height and do not style the mask. Rather than using 100% Height on that main slider container, try using 100vh. Apply your vertical offset to the main slide container and remove that style from the mask. I have a site with a slider using this sizing method here: http://gwynnvalley.webflow.io/
Working preview: Webflow - GwynnValley

Again, I’m not 100% sure of how you want it to function. Appears that you want the call-to-action and navigation to scroll, revealing the slider beneath. That correct?

@Port_of_Folio me changing it to 100vh and deleting the mask style didn’t change anything for me here.

the link to the site is http://wedowe.webflow.io

thanks for your help, please help me some more :slight_smile:

yooo, it’s been two days.

@cyberdave @Vincent @PixelGeek @thewonglv ?

Can anyone help, pleaseeee??

@Aimanisms

Sorry, didn’t check back here until today.

After closer inspection, there are too many moving parts for me to nail down what’s happening in your working file, so I’ve recreated things from scratch, showing how I would set up this page.

View on your phone here: http://test-mobile-settings.webflow.io/

View my working file here: https://preview.webflow.com/preview/test-mobile-settings?preview=5435e28cbd98b8a4e7e9d1178c1d29b9

Check out the Navigator panel to see how my DOM structure is set up differently from yours.

I’ve set it up a bit differently from what you’re showing with the navigation scrolling out of view to reveal the fixed slider. I like the slider moving up but you could just as easily have it fixed to perform that reveal effect.

I often avoid using vh/vw for most elements unless really needed (I’m only using it on the slider here). I noticed that almost all of your elements use vh/vw for scaling. Personal preference I guess but I feel like it’s a bit of a hack in some areas. Same with Flexbox. I’d suggest using simple in-line blocks where possible.

Also, overall, I would have switched to a mobile nav on smaller devices rather than just scale the desktop nav. This will free up a ton of space for your slider content and the links won’t be so small. Touch points are too close together for a mobile UX.

Again, there are many ways to construct a page. Just showing my personal methods here.

Best of luck,

C

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.