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.
P.S: remember to change into tablet mode: