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 trialIgor Pavlenko
12,925 Pointscss 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;
}
2 Answers
Travis Fulton
13,620 PointsHmm, 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
13,620 PointsYou're currently setting the width of the <li>, not the actual image. Try
.social a img { width:50px; }
Austin Whipple
29,725 PointsCould 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
12,925 PointsHi Travis
just tried but for some reason still nothing -( i tried renaming the class and even placing it inside the <img> element -- no change ?
Austin Whipple
29,725 PointsAustin Whipple
29,725 PointsI've updated your question formatting a bit. Be sure to check out the Markdown Cheatsheet (below the text editor) for more information.