社交媒體圖標不顯示在手機上

Question

即時通訊在頁腳上製作社交媒體圖標，它在個人電腦上顯示正常，但在移動時即時消失。這裏是我的代碼

<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; 
    } 
} 

還請，格式你的代碼！

祝你好運！ :)