ソーシャルメディアのアイコンがモバイルで表示されない

Question

ソーシャルメディアのアイコンをフッタに表示すると、PC上に表示されているときに表示されますが、モバイルのときは消えます。ここに私のコード

<footer class="container-fluid"> 
<p>Copyright 2016</p> 
<ul id="socialmedia"> 
    <li><a href="http://facebook.com" target="_blank"><i class="fa fa-facebook fa-fw"></i></a></li> 
    <li><a href="http://twitter.com" target="_blank"><i class="fa fa-twitter fa-fw"></i></a></li> 
    <li><a href="http://instagram.com" target="_blank"><i class="fa fa-instagram fa-fw"></i></a></li> 
    <li><a href="http://youtube.com" target="_blank"><i class="fa fa-youtube fa-fw"></i></a></li> 
</ul> 

があり、これはCSS

#socialmedia { 
margin:0 auto; 
display:block; 
width:22%; 
height:50px; 
padding:0; 
position:relative; 
top:-45px; 
left:-540px; 
background:#0C5060; 
} 
#socialmedia li { 
display:block; 
float:left; 
width:calc(25% - 1px); 
text-align:center; 
} 
#socialmedia a { 
display:block; 
padding:5px 0; 
font-size:24px; 
color:#F8F8F8; 
} 
#socialmedia a:hover { 
background-color:#fff; 
color:#166D81; 
} 
.socialmedia-mobile a { 
display:block; 
width:25%; 
float:left; 
text-align:center; 
} 

されており、ここでのフッターがPC 上でどのように見えるかにスクリーンショットの下にあり、それが電話でどのように見えるか

Answer 1

position: relative;topとleftは、問題の原因となっている#socialmediaセレクタの負の値に設定されています。

には、例えば、異なる画面サイズに異なったスタイル要素に@mediaクエリを使用してみてください：

#socialmedia { 
    margin:0 auto; 
    display:block; 
    width:22%; 
    height:50px; 
    padding:0; 
    background:#0C5060; 
} 

#socialmedia > li { 
    display:block; 
    width:25%; 
    float:left; 
    text-align:center; 
} 

@media (min-width: 768px) { 
    #socialmedia { 
     position:relative; 
     top:-45px; 
     left:-540px; 
    } 
} 

@media (max-width: 767px) { 
    #socialmedia > li { 
     display:block; 
     width:25%; 
     float:left; 
     text-align:center; 
    } 
} 

またしてください、あなたはコーディングフォーマットを！

幸運を祈る！ :)