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 CSS Foundations Values and Units Absolute Length Units

Dante Snow
Dante Snow
3,176 Points
Posted by Dante Snow
Dante Snow
3,176 Points

If I apply a width of 1920px to a div on my css will it occupy 1920 pixels on my display?

Hello, I am a little confused over if the px units are the same as the pixels on the device where the web page is rendered.

1 Answer

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Dante,

Yes is the short answer.
Pixels are the same on your device and code. Things can get a bit more complicated when you factor in Retina displays, where they display more pixels in the same area to give better detail.

I would recommend you use a max-width of 1920 rather than a fixed width of 1920 so your webpage looks better on smaller displays.

Hope this helps.

Dante Snow
Dante Snow
3,176 Points
Dante Snow
Dante Snow
3,176 Points

Thanks, sorry to bother again but I am a curious about what would be the long answer as in some sites it states that the hardware pixels are not related to the css px unit, instead this unit is relative and this has gotten me confused.

Reading the retina display and high dpi devices, using pixels does not seem like a correct approach as far as I understand.

For example If I made a web site with some text and decide the font size in pixels, it would look fine on my 1920 x 1080 23 inch display but if open the same website on a smartphone such as a nexus 5 that has the same resolution but with a 6 inch display it would look really small right? how do you fix this type of issue?

Edwin Zhang
Edwin Zhang
3,518 Points
Edwin Zhang
Edwin Zhang
3,518 Points

IMHO, max-width : 1920px; doesn't do the same work as width : 1920px. I think it's better use percentage or media queries to handle multiple resolution works.
Please correct me if there are any problems.