Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Add Iconography

Matthew McPartland
Matthew McPartland
16,430 Points

Contact icons not appearing right

Everything appeared to be working along with the video until I added the css rule

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

There is a small change in margin and padding like there is supposed to be, but the size of the icons do not shrink.

3 Answers

Interesting...

I can't see anything wrong with the code itself, as i have used the exact same code

.contact-info a {
  display:block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

It's the background-size element that would be doing the reshaping of the icons. Try change it to something very big like 100px to see if there is any difference at all? Or/and create another separate rule in your main.css with just the background-size itself and check that.

Rolf Willems
Rolf Willems
2,249 Points

Hi, Try adding in: "background-color: orange;" , in this way you will see what get's selected. Did you also check you defined it as a class instead of an id, because otherwise you need to use a #. Hopefully you will figure it out!

Best, Rolf

Matthew McPartland
Matthew McPartland
16,430 Points

Hey guys! Thanks for helping! I changed both the background color and the size, and it indeed changed. When I changed it back and refreshed, the issue resolved. I have no idea what I did to make the issue fix itself. Maybe there's something wrong with workspace or I forgot a semicolon.

Edit: Background-size was missing a colon. You can see it in my posted code above. I feel stupid; I spent hours trying to figure out what went wrong.

Rolf Willems
Rolf Willems
2,249 Points

no shame, i had the same issue with a semi-colon and i felt a real noob ;) glad you found out!