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

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

Nathaniel Nasarow
Nathaniel Nasarow
10,291 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,513 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,291 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.