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 CSS Basics (2014) Understanding Values and Units Color Values

Igor Pavlenko
Igor Pavlenko
12,925 Points
Posted by Igor Pavlenko
Igor Pavlenko
12,925 Points

css selectors

Hello guys

im stuck, for some reason i cannot assign css rules to change the size of the footer social media links. i need those to be in one line and much smaller then they are at the moment code below 

<footer id="main_footer">
                <ul class="t-border">
                  <li class="social"><a href=http://facebook.com/volvobahrain><img src="img/facebook.png" alt="facebook logo"></a></li>
                  <li class="social"><a href=http://twitter.com/volvocarsglobal><img src="img/twitter.png" alt="Twitter logo"></a></li>
                  <li class="social"><a href=mailto://igor.p@motorcity.com.bh><img src="img/emailigogo.png" alt="email"></a></li>
                  <li class="social"><a href="intent://send/+97333359288#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end"><img src="img/watsapp.png" alt="Whatsapp"></a></li>
                </ul>

.social {
  background-color: black;
  width: 50px;
  display: inline-block;
}
Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

I've updated your question formatting a bit. Be sure to check out the Markdown Cheatsheet (below the text editor) for more information.

2 Answers

Travis Fulton
Travis Fulton
13,620 Points
Travis Fulton
Travis Fulton
13,620 Points

Hmm, It seems to work in this codepen I set up. https://codepen.io/lowbelly/pen/wdXxwa I just changed your images to some placeholders. Codepen is a great way to quickly experiment and troubleshoot things by the way. Good luck.

Travis Fulton
Travis Fulton
13,620 Points
Travis Fulton
Travis Fulton
13,620 Points

You're currently setting the width of the <li>, not the actual image. Try

.social a img { width:50px; }
Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Could alternatively leave the width setting on the li and set display of the a to block and the img to width: 100%;

Perhaps a bit more complicated, but might help clear up some other use cases down the road.

Igor Pavlenko
Igor Pavlenko
12,925 Points
Igor Pavlenko
Igor Pavlenko
12,925 Points

Hi Travis

just tried but for some reason still nothing -( i tried renaming the class and even placing it inside the <img> element -- no change ?