社交媒体图标不显示在手机上

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

还请，格式你的代码！

祝你好运！ :)