Streaming live at 10am (PST)

Hero Section problem on tablet


#1

Hey folks,

I have a homepage with a hero section at 100vh, and a small section beneath it (offscreen). A button fixed to the bottom of the hero section has the interaction to scroll to reveal the bottom section.

This works fine on desktop, but on tablet (either orientation) the 100vh goes off the bottom, and so the scroll button is half-off the bottom of the screen.

Any ideas why?

Thank you!


#2

Hi @energidesign, send us your share link so we can take a look for you


#3

Hey @GourmetPixel, the link was in the other email topic about the non-centred dropdowns. Do you want me to send again here?
Thank you so much (and be sure to test on tablet, as the issue is not showing in Webflow Preview).


#4

Difficult to say as I cannot publish to check results on iPad. Try setting a specific height on your offers section, maybe that will help. Other than that, perhaps give your offers carousel an ID, then make the button go to that anchor - it might shove it up a bit further for you.


#5

Other than that, perhaps give your offers carousel an ID, then make the button go to that anchor - it might shove it up a bit further for you.

But this was the problem I had to work around, because the scrolling only goes to the top of an item, so if it's short (like the offers section) it starts scrolling and stops half way through with a sudden halt because it will never reach the top. I put this on the forum and someone suggested the trick with the fixed div with an ID to scroll it to the right place, and that works perfectly, but on the iPad it's hanging off the bottom. I tried adjusting the position of that ID div on the iPad and it made no difference, in either direction...

The actual link you can view on the iPad here http://blumen-roelofs.webflow.io/ but not sure if it will help if you can't adjust the code to try it.

I appreciate the feedback though, your help is much appreciated.

Steve

Steve Holmes
Creative Director

Energi.design

energi.design http://energi.design/

twitter.com/energidesign http://twitter.com/energidesign
facebook.com/energidesign http://facebook.com/energidesign


#6

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