I've implemented a footer on my website.
My goal is to have the icons centered both vertically and horizontally, with the colored area:
- Always positioned at the bottom of the screen
- No taller than the icons themselves
Here's the code snippet:
#footer {
background: #0e0e0e;
border-top: 0px solid #0e0e0e;
font-size: 0.9em;
margin-top: 0px;
padding: 0px;
clear: both;
position: absolute;
bottom: 0;
width: 100%;
height: 0px;
}<footer id="footer" class="color color-secondary short">
<div class="container">
<div class="row">
<div class="col-md-12 center">
<ul class="social-icons mb-md">
<li class="social-icons-fa-github"><a href="https://github.com" target="_blank" title="GitHub"><i class="fa fa-github"></i></a>
</li>
<li class="social-icons-linkedin"><a href="www.linkedin.com" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a>
</li>
<li class="social-icons-stack-overflow"><a href="http://stackoverflow.com" target="_blank" title="Linkedin"><i class="fa fa-stack-overflow"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Visual result with this specific code:
https://i.sstatic.net/FdUKP.png
I've experimented with adjusting the padding, margin, and height in px values multiple times without achieving the desired outcome.
Update: Following Dippas' code, I made additional modifications to the existing CSS code - resulting in:
#footer .container .row > div {
margin-bottom: 10px;
margin-top: -23px; }
Now, my footer is perfectly situated at the bottom with precise pixel distances!