CODEWITHSUNDEEP
htmlcsszurb-foundation
mohsinali1317
mohsinali1317

Reputation: 4425

Sticky footer jumps up on mobile screen

In my web app I have a sticky footer for small screens. The issue is that the sticky footer jumps up and down depending upon the state of the keyboard.

I am looking for it to be overlay by the mobile keyboard. Here is the css for the sticky footer

width: 100%;
position: fixed;
bottom: 0;
height: 85px;
left: 0;
right: 0;

Any workarounds for this?

Upvotes: 2

Views: 3234

Answers (1)

user1978550
user1978550

Reputation:

It's best to use something other than fixed for smaller/touch screens, since you would have to account for a number of different problems. This keyboard issue is one, turning the device to viewport: landscape is another. It can also cause an issue with scrolling, since touch devices don't render certain things until the scroll has completed (meaning elements can react differently depending on how quickly the user swipes their finger to scroll). It's better to make a site that is reliable most of the time instead of having to figure out and account for all the different possible circumstances.

Even for "desktop" devices, if you can do something without fixed positioning, do it. In those cases, using fixed positioning is more of a shortcut than a best practice.

There are a number of ways to create a "sticky" footer without using fixed positioning, and this will help to keep your site optimized for the best viewing experience on most devices. If you google 'sticky footer', you'll find a number of great options. Some are below.

Upvotes: 2

Related Questions