Menu icon Foundation
Centering unordered list footer menu

Hello, I'm having trouble centering the social icons in the bottom of my page. I searched the forum and found a couple suggestions, but I think they were outdated. I can only float the icons left or right, but can't center them. Here's my site at the moment. I also pasted the section of code that's giving me trouble.

http://fac3.net/new/

Thanks!

<div class="row column">
     <ul class="menu align-right">
    <li><a href="" target="_blank" class="fi-social-instagram"></a></li>
	<li><a href="" target="_blank" class="fi-social-twitter"></a></li>
	<li><a href="" target="_blank" class="fi-social-linkedin"></a></li>
     </ul>
</div>
            

         

centerlinksfooterunorderedlist

Hello, I'm having trouble centering the social icons in the bottom of my page. I searched the forum and found a couple suggestions, but I think they were outdated. I can only float the icons left or right, but can't center them. Here's my site at the moment. I also pasted the section of code that's giving me trouble.

http://fac3.net/new/

Thanks!

<div class="row column">
     <ul class="menu align-right">
    <li><a href="" target="_blank" class="fi-social-instagram"></a></li>
	<li><a href="" target="_blank" class="fi-social-twitter"></a></li>
	<li><a href="" target="_blank" class="fi-social-linkedin"></a></li>
     </ul>
</div>
            

         
Jason Demitri almost 4 years ago

Do you mean a little like this http://codepen.io/Blu-Jay/pen/gPQJEy

John McClaire almost 4 years ago

Exactly! Just one issue...the click area of each icon is pretty big. Any ideas? Thanks so much!

Jason Demitri almost 4 years ago

Change the padding for each link

so

.links a {
  list-style:none;
  font-weight:bold;
  padding: 1.5rem 0 1rem;
  margin:0;
}

Notice the padding has been halfed from the original

padding:3rem 0 2rem;

John McClaire almost 4 years ago

I tried that last night, but for some reason padding doesn't do anything at all. I can change it to whatever I want and nothing is affected. It's really weird. hmm...

John McClaire almost 4 years ago

Adding "display: inline-block" to ".links a" helped a lot. Thanks for all the help!