Question 250620 in CSS Question posted in
Some basic documentation can be found here.

Css – Footer with centered social media icons

I tried to get 3 social media icons in the center of a footer where I already have a linked aligned to each side. Everything is in a weird place and I’m not sure how to get it to sit where I want it to since I’m quite new to coding.

I tried having just <a> with embeded images, <ul> with each icon meant for the center as <li> and I tried it with the fa icons (recommended here: https://www.w3schools.com/howto/howto_css_social_media_buttons.asp and used in many CodePen templates).

Here’s a little expectations vs. reality: https://imgur.com/Hn1gBMj

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Got it to work with this:

    <footer>
    <div class="footer-container">
      <a class="link footer-left" href="index.html">n.l.tkaczyk</a>
      <div class="footer-icons">
        <ul>
          <li><a href="https://www.linkedin.com/in/nltkaczyk/" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a></li>
          <li><a href="https://www.instagram.com/n.l.tkaczyk/" target="_blank"><i class="fa fa-instagram fa-2x"></i></a></li>
          <li><a href="https://www.youtube.com/@n.l.tkaczyk/" target="_blank"><i class="fa fa-youtube fa-2x"></i></a></li>
      </ul>
      </div>
      <a class="link footer-right" href="contact.html">contact</a>
    </div>

  <div class="copyright">
    <p style="color: #95AAB6;">
      2023 &copy by Natalia Lidia Tkaczyk
    </p>
  </div>
</footer>

    And CSS:

    footer {
text-align: center;}

.footer-container {
background-color: #95AAB6;
display: flex;}

.footer-container a {
color: #F5F6F7;
padding: 42px 16px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: medium;}

.footer-left {
margin-right: auto}

.fa:hover {
color: #45405F;}

.footer-icons {
justify-content: space-between;
padding: 16px 64px 0px 0px}

.footer-icons ul {
list-style-type: none;}

.footer-icons li {
display: inline-block;}

.footer-right {
margin-left: auto}

.copyright 
{background-color: #F5F6F7;
overflow: hidden;}

    I had to use some padding to get it centred since it was a bit off, but it seems to work just fine for now, so thanks! I overcomplicated it by copying code from different sources, so I started from scratch with your advice. Let me know if there is anything that could be optimised :)


  2. 0

    Your footer should have 3 direct children: the two links and in between them one div with the three social icons inside. On the footer, put display: flex and justify-content: space-between.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search