フッタのコンテンツはモバイルビューで表示されません

これはまだ非常に新しいので、事前にお詫び申し上げます。フッタのコンテンツはモバイルビューで表示されません

私のフッターでは、デスクトップビューが正常に動作します。ランドスケープモバイルビューもそうです。それは、これらの二つのビュー

に見えますが、私は間違った場所モバイル肖像画で、ソーシャルメディアのアイコンは、不足している？どのように相続人

フッタースタイリングのための私のフッター

<footer class="nav navbar-fixed-bottom navbar-default"> 
       <div class="container-fluid"> 
        <p>&copy; 2017 Example Example</p> 
        <ul> 
         <li><a href=""><span class="fa fa-twitter"></span></a></li> 
         <li><a href=""><span class="fa fa-facebook"></span></a></li> 
         <li><a href=""><span class="fa fa-instagram"></span></a></li> 
         <li><a href=""><span class="fa fa-snapchat"></span></a></li> 
         <li><a href=""><span class="fa fa-youtube"></span></a></li> 
        </ul> 
       </div> 
      </footer>

CSSのためのHTMLコード

footer { 
    background-color: #000000; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50px; 
} 

footer p { 
    float: left; 
    text-align: center; 
    margin-top: 15px; 
} 

footer ul { 
    list-style: none; 
    display: flex; 
    flex: 1; 
    flex-direction: row; 
    float: right; 
    font-size:35px; 
    margin-top: 2px; 
} 

.fa-twitter { 
    margin-right:10px; 
    color: #fff; 
} 

.fa-twitter:hover{ 
    color: #00aced; 
} 

.fa-facebook { 
    margin-right:10px; 
    color: #fff; 
} 

.fa-facebook:hover{ 
    color: #3b5998; 
} 

.fa-instagram { 
    margin-right:10px; 
    color: #fff; 
} 

.fa-instagram:hover{ 

    background-image: linear-gradient(45deg, #fccc63, #fbad50, #e95950, #cd486b, #8a3ab9, #4c68d7); 
    color: transparent; 
    background-clip: text; 
    -webkit-background-clip: text; 
} 

.fa-snapchat { 
    margin-right:10px; 
    color: #fff; 
} 

.fa-snapchat:hover{ 
    color: #fffc00; 
} 

.fa-youtube { 
    margin-right:5px; 
    color: #fff; 
} 

.fa-youtube:hover{ 
    color: #cb2027; 
}

任意の助けをいただければ幸いです！

出典

2017-04-02 Michael Birtwistle

ほとんどの場合、ソーシャルアイコンを持つulは、pタグのテキストの横にあるフッターの幅に合わなくなり、下に新しい行にプッシュされます（両方ともフローティング）。しかし高さは固定されているので（50px）、隠されています。 footerの高さをテスト用に100pxのように変更してみてください。これが起こっているかどうかがわかります。はいの場合、すべてのものを（メディアクエリ内で）少し小さくして、1行に収める必要があります。

出典

2017-04-02 22:53:40 Johannes

これを読んで、その後、今日のコーディング約8時間を過ごした後、私はかなり愚かな感じ！肖像画の携帯電話のメディアクエリのフォントサイズを縮小しました。どうもありがとう！ –

ソーシャルアイコンが大きすぎるため、<ul>全体が次の行に折り返して表示されますが、<footer>の高さが定義されているため、ビューポートの外側に表示されます。あなたのアイコンを小さくするか、<p>のテキストを狭い幅で2行折り返すようにしてください。

出典

2017-04-02 22:54:23 Gwellin

あなたはこれが役立つかもしれない

 <!DOCTYPE html> 
 
     <html lang="en"> 
 
     <head> 
 
      <title></title> 
 
     </head> 
 
     <body class="works_on_smartphone"> 
 
     . 
 
     . 
 
     . 
 
     <footer> 
 
     . 
 
     . 
 
     . 
 
     </footer> 
 
     </body> 
 
     </html>

のように、すべての周りにbodyタグを入れしようとする場合があります。

ここで説明するように、あなたが見たいかもしれないもう一つの方法はあなたの順序なしリストのためのフレキシボックスを使用している

：[1]：Flexbox with Unordered list チャールズ

出典

2017-04-02 23:01:18

フッタのコンテンツはモバイルビューで表示されません

答えて

関連する問題