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

Posted by rossace23
rossace23
3,819 Points

Icons uncenter when shrinking the browser size

I have just coded the footer element of my website to include 5 social media icons that span across the full width of the page. Everything looks good and centered when at full and medium width, but when I shrink the browser size smaller the social media icons become slightly off center.

I have attempted to set the width of the footer and margins with relative percentages so that they remain stable when shrinking the page, so I am unsure why things look a bit off center when I shrink the browser down to mobile phone size! My code is below, can anyone help?? My OCD is kicking in haha.

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

header {
    background-color: #000;
    max-width: 25%;
}

a {
    text-decoration: none;
  border-style: none;
  outline: none;
}

a:link {
    color: white;
}

a:visited {
    color: #FFFFE9;
}

nav ul li a:hover {
  background: #FFFFE9;
  color: black;
}


/********************************************
HEADING
*********************************************/
/* For Padding: 0 = top, 0 = right, 30px = bottom, 0 = left (just like a clockwise motion) */

.BandName {
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px 20px 20px;
}



/********************************************
BODY
*********************************************/

.middlepage {
    background-color: #000;
}

.MouthsLogo {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 200px;
     margin-top: 0;
     height: auto; 
   width: auto;
     max-width: 150px; 
     max-height: 150px;
     padding: 20px 20px 20px 20px;  
}



/********************************************
NAV
*********************************************/

nav {
    text-align: center;
}

nav ul {
  display: table;
  width: 100%;
  list-style: none;
  padding: 20px 0px;
}

nav ul li {
  display: table-cell;
  text-align: center;
  width: 33%;
}

nav ul li a {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
}


/********************************************
FOOTER
*********************************************/


footer {
    background-color: #FFF;
  width: 100%;       /* footer bar spans the whole page width */
  text-align: center;
  clear: both;  
}

footer a {
  display: inline-block;
  text-align: center;
  width: 5%;
  height: 5%;
  margin: 0 5%;
}

.social-icon {
  display: inline-block;
  width: 50px;
  height: 50px;
}

<!DOCTYPE html>
<html>
  <head>
      <title>The Mouths</title>
       <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/style.css">
  </head>

  <body class="middlepage">
      <header>
          <a href="index.html">
              <h1 class="BandName">The Mouths</h1>
          </a>
      </header>

      <div class="middlediv">
              <img src="img/TheMouths.jpg" class="MouthsLogo">
      </div>

      <div>
          <nav>
              <ul>
                  <li id="bandnav"><a href="band.html">Band</a></li>
                  <li id="musicnav"><a href="music.html">Music</a></li>
                  <li id="eventsnav"><a href="events.html">Events</a></li>
              </ul>
          </nav>
      </div>
  </body>

  <footer>
            <a href="http://www.facebook.com/themouths"><img src="img/Facebook.png" alt="Facebook Logo" class="social-icon"> </a>
            <a href="http://www.instagram.com/the.mouths"><img src="img/Instagram.png" alt="Instagram Logo" class="social-icon"> </a>
            <a href="http://www.twitter.com/themouths"><img src="img/Twitter.png" alt="Twitter Logo" class="social-icon"> </a>
            <a href="http://www.youtube.com/user/TheMouthsMusic"><img src="img/YouTube.png" alt="YouTube Logo" class="social-icon"> </a>
            <a href="http://www.themouths1.bandcamp.com/"><img src="img/Bandcamp.png" alt="Twitter Logo" class="social-icon"> </a>
            <p class="nametag">&copy; 2015 Ross Sheppard</p>
  </footer>

</html>

4 Answers

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

You need to write footer inside body tag

  <body class="middlepage">
      <header>
          <a href="index.html">
              <h1 class="BandName">The Mouths</h1>
          </a>
      </header>

      <div class="middlediv">
              <img src="img/TheMouths.jpg" class="MouthsLogo">
      </div>

      <div>
          <nav>
              <ul>
                  <li id="bandnav"><a href="band.html">Band</a></li>
                  <li id="musicnav"><a href="music.html">Music</a></li>
                  <li id="eventsnav"><a href="events.html">Events</a></li>
              </ul>
          </nav>
      </div>


  <footer>
            <a href="http://www.facebook.com/themouths"><img src="img/Facebook.png" alt="Facebook Logo" class="social-icon"> </a>
            <a href="http://www.instagram.com/the.mouths"><img src="img/Instagram.png" alt="Instagram Logo" class="social-icon"> </a>
            <a href="http://www.twitter.com/themouths"><img src="img/Twitter.png" alt="Twitter Logo" class="social-icon"> </a>
            <a href="http://www.youtube.com/user/TheMouthsMusic"><img src="img/YouTube.png" alt="YouTube Logo" class="social-icon"> </a>
            <a href="http://www.themouths1.bandcamp.com/"><img src="img/Bandcamp.png" alt="Twitter Logo" class="social-icon"> </a>
            <p class="nametag">&copy; 2015 Ross Sheppard</p>
  </footer>
  </body>
Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

This is how the DOM structure looks like

https://camo.githubusercontent.com/6ded8f7e56da0bd98cd58f59cc7920b1ccfbd036/687474703a2f2f7777772e74757872616461722e636f6d2f66696c65732f4c58463131382e7475745f6772656173652e6469616772616d2e706e67

rossace23
rossace23
3,819 Points
rossace23
rossace23
3,819 Points

Thank you so much, I forgot the basic DOM structure! This helps profoundly, as does the validator. Best!

rossace23
rossace23
3,819 Points
rossace23
rossace23
3,819 Points

Hmm I have just placed the footer inside the body element, but the same issue persists. I have checked with the validator and no error messages come up regarding the spacing or the body/footer relationship. Am I missing something else in my CSS code that is causing the icons to be out of alignment when shrinking to a very small screen size?

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Try this CSS code:

/*********************************************
FOOTER
*********************************************/

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

.social-icon{
    width: 20px;
    height: 20px;
    margin: 0 5px;
}
Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

It should work - https://jsfiddle.net/j7e6jcjb/

And your code will display - https://jsfiddle.net/njadp9u2/

Try in another browser your code. If it will work fine, then delete coockies and refresh page on your main breowser with Ctrl+F5 (or Cmd+F5)

rossace23
rossace23
3,819 Points
rossace23
rossace23
3,819 Points

Yes that works when I remove the "footer a" selector and use your the footer CSS code above. Thank you, looks like the display: inline-block element of the footer a selector, and perhaps the margin features I had were causing the undesired shift when shrinking the page.

Best!