Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Having difficulty aligning social media icons in footer

I am finding it hard in mobile view to get my social media icons to align them in a central position. I have tried to use margin: 0 auto in my un-ordered list but this does nothing so I have added margin to the left, but it doesn't look that good. Any suggestions on what to do?

Here is a link to my snapshot

Aaron Loften
Aaron Loften
12,464 Points
Aaron Loften
Aaron Loften
12,464 Points

can you share the preview as well?

2 Answers

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

I didn't spend a lot of time on this to see if there was a necessity for using the float: left property with your list items, but here's a version that works and perhaps you can tweak.

.social-media ul{
  padding:0;
  text-align: center;
}

.social-media li{
  display: inline;
  list-style:none;
  width:15%;
  padding:5px;

}
.social-media li img {
 width: 2.5em; 
}
Aaron Loften
Aaron Loften
12,464 Points
Aaron Loften
Aaron Loften
12,464 Points

Without seeing a preview, I have a guess...

It looks like your footer is not being referenced in your css. It would probably be wise to give the footer a width. I usually will give it the width of 100%. But thats up to you.

If you give the footer a width, the margin: 0 auto; should cause it to be centered but on only centered within the footer. So if the footer does not have a width, it will look like nothing happened at all.

Another work-around... You SHOULD be able to center the footer by applying the margin center fix the footer element.

In short....one of the following may work. give the footer a width...

footer {
  width: 100%;
}

.social-media {
  margin: 0 auto;
}

or

give center the footer...

footer {
  margin: 0 auto;
}