Streaming live at 10am (PST)

Empty gap under hero section on iPad


I’ve started to arrange the tablet version of a site I’m working on and have found a problem that I find imposible to solve after several hours lost (for something that looks so simple !)

I have a hero section with an image, and in the inferior part a DIV with a bouncing arrow to invite the visitor to scroll down. It works on webflow and until now on all desktop web browsers and systems that I’ve tested it on, but on the iPad.

On iPad I get an empty space, of around I guess 20px (address and tabs height?). And I can’t seem to solve it, changing all kind of parameters… it only shows when tested on an iPad.

I’ve been able to solve it by setting the hero section height to 94% instead of 100% and adjusting margins… that works on tablet mode on the iPad… but when the iPad is in landscape position it uses the desktop version of the page, and there I can’t use that simple solution because in the desktop version in a real computer, all those margins and variations are visible.

I was preparing a simple example of this problem, and just when preparing the sections it has started to fail. The Blue nav DIV should be on the inferior part of the screen, but it is off the initial viewable area on my iPad (Air 2).

I’ve tried several solutions on the forum without any success.

Any advise will be welcomed.

Thank you.

P.S: remember to change into tablet mode:

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

I think I’ve solved it, I added a DIV inside the Hero section and a Section under it, and one covers the other, filling the space gap it was producing. A better explanation can be observed in the example of the previous message.

This solution works if the inferior area is a straight block but mine has a curvature, so the color of the “filler div” stays over the background image ruining the effect.

Any other idea?

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