Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Mayur Pande
PLUS
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

can you share the preview as well?

2 Answers

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; 
}

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;
}