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 Adding Pages to a Website Add Iconography

Posted by dlip
dlip
8,499 Points

Background images on contact page sizing

Regarding the images on contact page, since we set the background-size to 20px 20px, why is it necessary to set a min height of 20px?

Also, why do we set an exact pixel size of these images to 20px? Since the page is responsive, wouldn't it make more sense to set it as a percentage? (We also set the social-icon images to a fixed pixel, as well).

Finally, why is the styling on the a element within the li.phone class, and not directly on the li.phone ?

Thanks!

Kathryn Notson
Kathryn Notson
25,941 Points

redlicorice:

Sometimes you want an image to be in a specific location on a page, like icons, for telephone, e-mail, Facebook, & Twitter. That's why you would use absolute units (pixels) to place an icon image on a page.

If you used relative units (percentages) on icons for telephone, e-mail, Facebook, & Twitter, then they would stretch out & look weird. You don't want that with telephone, e-mail, Facebook, & Twitter icons. You want icons to be in the same place on your web page regardless of the size of your viewport (from iPhone to desktop). They aren't supposed to be prominent on your web page. Icons are there to draw attention to the user to find your contact information easily.

You could experiment with it & see what happens when you change the pixels to percentages, & write down the result in your notes after you set the icon images correctly using pixels. I'm sure such an odd outcome would make for a strange video of errors, if you created one.

Happy coding!