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.

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

Nathaniel Nasarow
Nathaniel Nasarow
10,290 Points

Social network icons resolution and sizing

Earlier in the video, Nick states that we should resize the social media icons while maintaining detail for high-res displays.

He used pixel sizing specifically when making them smaller (20px, approximately half of the original size).

However, what if I used percentages? such as 5%, would the detail remain, or be somehow lost? I tried it at 50% just for giggles, and those things became huge, and also lost some of that sharpness compared to the smaller, original size. I also tried it in pixel measurements at 100px height and width. Same thing (although quite smaller than 50% size).

Now, personally, I don't think it matters either way (pixel measurements just makes things a little easier to predict). I do a lot of photography, and I know that the less pixels you have in an original image, the less detail it holds overall which you can see more easily as you enlarge the image past its maximum. A smaller image just makes things... smaller. Harder to see fine detail, but makes the file smaller as well.

Perhaps I'm missing something here though. Granted, I know I'm WAY overthinking this, but I'm simply curious.

1 Answer

luke hammer
luke hammer
25,511 Points

yes and no. the limiting factor in you situation would be the monitor not the webpage. 4k screens use a cheat when working with webpages that it will use 4 pixels for each pixel as declared in CSS.

basically it prevents you from having to write a new view for 4k screens. or else what would have normally take up a whole screen now would only take up 1/4 of the screen. in many cases this would make your text unreadable.

Nathaniel Nasarow
Nathaniel Nasarow
10,290 Points

Ah, ok, that makes sense. Is there a difference for retina displays though? my friend Matt said that there is some sort of command line or something that makes text shaper for retina displays, but I never did look into it.