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

CSS How to Make a Website Adding Pages to a Website Add Iconography

Stuart McPherson
Stuart McPherson
15,939 Points
Posted by Stuart McPherson
Stuart McPherson
15,939 Points

How to get social media icons horizontally in line?

I had my social media icons in the footer, horizontally in line before. Now one is on top of the other. Any help would be appreciated

Here's my css code:

/*****************************************************************************************************************
GENERAL
*****************************************************************************************************************/

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 8%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*****************************************************************************************************************
Header
*****************************************************************************************************************/

header {
  float:left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

header {
  background-color:#6ab47b; 
}


h1, h2 {
  color: #ffffff; 
}

h1 {
  font-family: 'Changa One', sans-serif; 
  margin: 15px 0; 
  font-size: 1.75em; 
  font-weight: normal; 
  line-height: 0.8em; 
}

h2 {
  font-family: 'Changa One', sans-serif; 
  margin: -5px 0 0; 
  font-size: 0.75em; 
  font-weight: normal; 
}

h3 {
 margin: 0 0 1em 0; 
}

#logo { 
  text-align: center;
  margin: 0;
}

/*****************************************************************************************************************
Body
*****************************************************************************************************************/

body {
  background-color: #ffffff; 
  color: #888888; 
}

body {
  font-family: 'Open Sans', sans-serif; 
}

/*****************************************************************************************************************
Navigation
*****************************************************************************************************************/

nav {
  background-color: #599a68; 
}

nav {
  text-align: center;
  padding: 10px 0; 
  margin: 20px 0 0; 
}

nav ul {
  list-style: none; 
  margin: 0 10px; 
  padding: 0; 

nav li {
  display: inline-block; 
}

nav a {
  font-weight: 800; 
  padding: 15px 10px; 
}

/*****************************************************************************************************************
Footer
*****************************************************************************************************************/

footer {
  font-size: 0.75em;
  text-align: center; 
  clear: both;
  padding-top: 50px; 
  color: #cccccc; 
}

.social-icon {
  display: inline
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/*****************************************************************************************************************
Page Portfolio
*****************************************************************************************************************/

#gallery {
  margin: 0;
  padding: 0; 
  list-style: none;
}

#gallery li {
  float: left; 
  width: 45%; 
  margin: 2.5%;
  background-color: #f5f5f5; 
  color: #bdc3c7; 
}

#gallery, li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}


/*****************************************************************************************************************
Links
*****************************************************************************************************************/

a {
  color: #888888 
}

nav a, nav a:visited {
  color: #ffffff; 
}

nav a.selected, nav a:hover {
  color: #32673f; 
}

/*****************************************************************************************************************
Page: About
*****************************************************************************************************************/

.profile-photo {
  display: block; 
  max-width: 150px; 
  margin: 0 auto 30px;
  border-radius: 100%; 
}

/*****************************************************************************************************************
Page: Contact
*****************************************************************************************************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info li, a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 15px;
  margin: 0 0 10px;
}

.contact-info li.phone {
  background-image: url('../img/phone.png');
}

.contact-info li.mail {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter {
  background-image: url('../img/twitter.png');
}

here's my html code:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Stuart McPherson | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <header>
      <a href="index.html" id="logo">
        <h1>Stuart McPherson</h1>
        <h2>Designer</h2>
      </a>

      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with colour and texture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using photoshop brushes</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repitition</p>
            </a>
          </li>
        </ul>
      </section>

      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Stuart McPherson</p>
      </footer>
    </div>

   </body>
</html>

4 Answers

Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points
Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points

Could you also post the html code?

Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points
Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points

First thing first close the display decleration with a semicolon

.social-icon {
  display: inline /* Here */
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

This however isn't the problem in the case. The browsert should figure it out on its own about the missing semicolon. The problem is in the width and height property. The idea behind an inline element is that its takes only as much width and height as it needs. So if your element is inline the browser will ignore any width and height you declare. At the same time it also doesn't ignore the fact that you used the width property. When you write:

display: inline;
width: XXpx;

it converts your element into a block level element. And a block level element will take up the entire line. So that is why it happens the way it does. Remove the width and height decleration and it should put it on a single line.

Check this out for a more detailed review of the display property.

I hope the answer helped you. If you have more questions please go ahead and ask.

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

Thank you for the info on how the inline/block affects the height and width.

I've tried what you suggested but it doesn't seem to have any effect. Even though what you say sounds logical.

I had it inline before not using the inline declaration but stating the height and width. I must have changed some code to change how it displays but I'm not sure what it could be

Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points
Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points

try this:

footer img {
 width: 20px;
 height auto;
 margin: 0 5px;
}

and remove the social-icon class.

If you want to position the icons left, center or right I suggest you wrap them in a div or ul element.

Let me know if this worked?

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

I put that code into the css, took out the class on the two images and removed the class code in the css. And I still had one image on top of another. :/ is 'footer img' how you apply style to all the images in the footer?

I appreciate you helping

Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points
Nikolay Mihaylov
Nikolay Mihaylov
2,810 Points

Yeah I used footer img instead of the class. Just so I make sure I understood you, are the two images literally stacked on each or both images are visible,just on seperate lines?

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

They are both in a vertical line but there is space between them both. Both are completely visible. So its like they are on separate lines.