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

dsteelz
dsteelz
1,203 Points
Posted by dsteelz
dsteelz
1,203 Points

LinkedIn Logo looks weird

I followed the instructions and used the ".social-icon" class to resize the width and height of my image to 20px; when I did. it made my LinkedIn logo look all scrunched up. the logo looked better before I made the change. what am I doing wrong?

NOTE: I am not using the Facebook or Twitter image logos

my code -> https://w.trhou.se/ktnin9qoc8

2 Answers

Alexa Stefanou
Alexa Stefanou
7,695 Points

The LinkedIn image you used is not a square so if you define the height and the width to be equal dimensions the image will be distorted because the proportions aren't scaling. If you want to define a size pick to define either the height OR the width.

Eliminate the height declaration within the CSS rule and see if that solves the squishing problem.

Justin Warren
Justin Warren
7,805 Points
Justin Warren
Justin Warren
7,805 Points

Hi!

So I'm not totally sure about this but, I think it may have to do with your margin settings.

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

Possibly try to take out the margin values. Right now the right and left margins are set to 5px. So that could be what is causing the logo to be scrunched up!

Hope this helps!

Also here is a great resource for more on margins: https://www.w3schools.com/Css/css_margin.asp

Happy coding!