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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Posted by web pad
web pad
4,483 Points

I changed both width/height of social icons to 75px to experiment, but no effect. Is it affected by specificity?

I tried to practice changing the width ,height and margin in the social media icon section. I noticed that there is no difference at all if I increase or decrease width and height in terms of pixel. The only difference I will see when I refresh it, is when I increase the margins. But the width and height still remains the same size regardless the number I set it to. Is it affected by specificity?

This is a snapshot of my code.

https://w.trhou.se/cj4n84ifbk

Thank you.

1 Answer

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi web pad,

Your social media image tags <img>, have been nested outside of <a> element with the class social-icon. Therefore any styling you apply to the social-icon class is not applied to the <img>. If you place ethe <img> inside of the <a> it should work.

Hope it helps, Max

web pad
web pad
4,483 Points

I'm not sure if I inserted the code correctly inside the anchor tag in index.html. This is my code. It's still not letting me resize the icons. Am I missing any quotations or coded it wrong? I inserted the img tags insta4.png and twitter-wrap.png inside the anchor tags.

<a href="https://en.wikipedia.org/wiki/Instagram" alt="instagram-logo" class="social-icon"><img src="img/insta4.png"></a>
<a href="https://finance.yahoo.com/news/spacex-facebook-page-down-musk-promises-twitter-171854506--finance.html" alt="twitter-logo"class="social-icon"><img src="img/twitter-wrap.png"></a>

This is a snapshot of the edited code. For some reason, when I play around the margins of the social icons, it works, only the height and width does not. Do you think it has something to do with the image file? Thank you once again.

https://w.trhou.se/cj4n84ifbk