Messi Adrinho Messi Adrinho - 4 months ago 9
CSS Question

social media icons dont show on mobile

im making social media icons on footer, it shows fine when im on PC, but it disapear when im on mobile. Here is my code

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




and this is the 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;
}


And here is below the screenshot on how footer looks on PC
and how it looks on phone

footer on PC

footer on Phone

Answer

You have a position: relative; with top and left set to negative values on #socialmedia selector which is causing the problem.

Try to use @media queries to style elements differently on different screen sizes, for example:

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

Also please, format you code!

Good luck! :)