diappearing footer on small screen size/mobile devices

Question

I have just designed my first wordpress.org running site, with a custom theme. This seems to be working well on the larger browsers I've been viewing it on but if I reduce the window size down, or view on mobile devices the footer half/fully disappears- which makes the site unusable. It's coded with fixed position, and at 94% from the top, see below:

>/* footer */
>
>#footer {
>   position:fixed;
>   top: 94%;
>   font-family:Arial, Helvetica, sans-serif;
>   font-size:14px;
>   width: 100%;
>}
>
>#footerdivide {
>   position: fixed;
>   width:inherit;
>   z-index:2;
>   background-color:inherit;
>   padding-left: 10px;
>}
>
>
>#footerdivide2 {
>   position: fixed;
>   width: 98%;
>   background-color:inherit;
>
>}
>
>
>.footerbutton {
>       display:inline-block;
>       padding-right: 40px;
>       font-size: 16px;
>}
>

The website is james-clarkson

Answer 1

Check this:

#footer {
   position:fixed;
   bottom: 0;
   height: 40px; // correct if needed
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   width: 100%;
}