Aus irgendeinem Grund ist meine Fußzeile nicht sehr mobile freundlich

Question

90% meiner Website ist Mobil-Friendly (alles Größen und so), aber aus irgendeinem Grund ist meine Fußzeile im Grunde vollständig auf Handy abgeschnitten.

Die Art, wie ich es Setup currently habe, ist genau, wie ich es einrichten möchte. Dies ist, wie es auf Handy aussieht:

$(function() { 
 
    $('.navigation .nav-toggle').on('click', function() { 
 
    $('.wrapper').toggleClass('open'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() { 
 
    $('.navigation ul li').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('.navigation ul li.home a').addClass('active'); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
    align-items: center; 
 
    background: url("../images/bg.png") no-repeat; 
 
    background-size: cover; 
 
} 
 

 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.navigation { 
 
    width: 100%; 
 
} 
 

 
.navigation ul { 
 
    overflow: hidden; 
 
    color: white; 
 
    padding: 0; 
 
    text-align: right; 
 
    margin: 0; 
 
    margin-right: 15px; 
 
} 
 

 
.navigation ul li { 
 
    padding: 17px 12px; 
 
    display: inline-block; 
 
} 
 

 
.navigation ul li a { 
 
    -webkit-transition: color 0.4s; 
 
    -moz-transition: color 0.4s; 
 
    -ms-transition: color 0.4s; 
 
    -o-transition: color 0.4s; 
 
    transition: color 0.4s; 
 
} 
 

 
.navigation ul li a:hover { 
 
    color: #00D5C2; 
 
} 
 

 
.navigation ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 115%; 
 
    display: block; 
 
} 
 

 
.side-nav { 
 
    position: fixed; 
 
    width: 220px; 
 
    height: 150vh; 
 
    background-color: #2D2D2D; 
 
    transform: translateX(-100%); 
 
    transition: transform 0.4s ease; 
 
} 
 

 
.side-nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    z-index: 0; 
 
} 
 

 
.side-nav ul li { 
 
    border-bottom: 1px solid gray; 
 
    border-width: 100%; 
 
    margin: 5px; 
 
} 
 

 
.outerwrapper { 
 
    height: 100vh; 
 
    display: block; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
} 
 

 
.wrapper { 
 
    height: 100vh; 
 
    display: block; 
 
    transform: translateX(-100); 
 
    transition: transform 0.6s ease; 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 

 
.wrapper.open { 
 
    transform: translateX(220px); 
 
    background-color: rgba(84, 84, 84, 0.6); 
 
} 
 

 
.side-nav ul li a { 
 
    padding: 10px; 
 
    display: block; 
 
    color: gray; 
 
    text-decoration: none; 
 
} 
 

 
.side-nav ul li a:hover { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
.side-nav.open { 
 
    transform: translateX(0); 
 
} 
 

 
.navigation .nav-toggle { 
 
    display: none; 
 
    float: left; 
 
    padding: 20px 30px 20px 30px; 
 
    cursor: pointer; 
 
} 
 

 
.footer { 
 
    margin-top: -5em; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgba(237, 237, 237, 0.2); 
 
    position: relative; 
 
    height: 70px; 
 
    z-index: -1; 
 
} 
 

 
.footerinfo { 
 
    margin-top: 20px; 
 
} 
 

 
.footerinfo p { 
 
    vertical-align: middle; 
 
    padding: 25px; 
 
    color: white; 
 
    text-align: center; 
 
    ; 
 
} 
 

 
.navigation ul li a.active { 
 
    color: #00F0DB; 
 
} 
 

 
#logo img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    width: auto\9; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.footerlogo img { 
 
    margin-bottom: -65px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.about-btn { 
 
    -webkit-transition: color 0.4s; 
 
    -moz-transition: color 0.4s; 
 
    -ms-transition: color 0.4s; 
 
    -o-transition: color 0.4s; 
 
    transition: color 0.4s; 
 
    -webkit-transition: border-color 0.4s; 
 
    -moz-transition: border-color 0.4s; 
 
    -ms-transition: border-color 0.4s; 
 
    -o-transition: border-color 0.4s; 
 
    transition: border-color 0.4s; 
 
    font-size: 135%; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    width: auto; 
 
    display: block; 
 
} 
 

 
.about-btn a { 
 
    -webkit-transition: color 0.4s; 
 
    -moz-transition: color 0.4s; 
 
    -ms-transition: color 0.4s; 
 
    -o-transition: color 0.4s; 
 
    transition: color 0.4s; 
 
    -webkit-transition: border-color 0.4s; 
 
    -moz-transition: border-color 0.4s; 
 
    -ms-transition: border-color 0.4s; 
 
    -o-transition: border-color 0.4s; 
 
    transition: border-color 0.4s; 
 
    color: #3A9DA4; 
 
    border-radius: 9px; 
 
    padding: 10px 20px; 
 
    border: solid #3A9DA4 3px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    transition: all 0, 4s; 
 
} 
 

 
.about-btn li { 
 
    list-style-type: none; 
 
    margin: auto; 
 
    align-items: center; 
 
    width: 50%; 
 
    text-align: center; 
 
} 
 

 
.about-btn a:hover { 
 
    border-color: white; 
 
    color: white; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    transition: scale(1, 1) 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    .navigation ul li { 
 
    display: none; 
 
    } 
 
    .navigation .nav-toggle { 
 
    display: inline; 
 
    } 
 
    .about-btn a { 
 
    font-size: 15px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outerwrapper"> 
 
    <div class="wrapper"> 
 
    <div class="side-nav"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Repo</a></li> 
 
     <li><a href="#">Code</a></li> 
 
     <li class="pluginrequests"><a href="request">Request Plugin</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="navigation"> 
 
     <ul> 
 
     <li class="nav-toggle">&#9776</li> 
 
     <li class="home"><a href="#">Home</a></li> 
 
     <li class="repo"><a href="#">Repo</a></li> 
 
     <li class="pluginrequests"><a href="request">Request Plugin</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="logo"> 
 
     <img src="images/logo.png" alt="Squallz Logo"> 
 
    </div> 
 
    <div class="about-btn"> 
 
     <li><a href="about">About Me</a></li> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
    <div class="footerinfo"> 
 
     <p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Versuchen das Hinzufügen dieser in Ihrem CSS und sehen wieder in Ihrem mobilel

.outerwrapper {
height: 100% !wichtig;
}

Answer 2

Sie müssen die CSS der Fußzeile Klasse auf:

z-index: 999 !important; 
 
position: fixed !important; 
 
bottom:0 !important; 
 
background-color: rgba(237, 237, 237, 0.2);