何かの理由で、私のフッタはモバイルフレンドリーではありません。

Question

私のウェブサイトの90％はモバイルフレンドリーです（サイズ変更はすべてです）。何らかの理由で私のフッターは基本的に完全に切断されています。

私が設定した方法currentlyは、セットアップの方法を正確に表しています。あなたのCSSでこれを追加すること

$(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

試してみて、あなたのmobileL

.outerwrapper {
高さに再び表示：：これは、携帯電話上のように見えるものである100％ ！重要;
}

Answer 2

あなたがにフッタクラスのCSSを設定する必要があります。フッターがあるべき場所になりました私に一番下にいる間のギャップを与えている

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