CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Messi Adrinho
Messi Adrinho

Reputation: 95

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

Upvotes: 0

Views: 150

Answers (1)

pmate
pmate

Reputation: 181

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! :)

Upvotes: 3

Related Questions