Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

I think `width: 70%;` is a bad idea. If you have a very wide screen, 70% of it is too much and on a mobile device you don't want to waste 30%.



It's a catch-22 pretty much. If you set it as pixels, it can be either too narrow (600 px on a full hd in full screen, though lines that are too wide/long suck too) or too wide (which leads to scroll bars).

Setting it as a percentage will obviously always make it look the same since it scales. However, a percentage on a huge screen usually makes it too wide to read lines comfortably.

You pretty much have to pick your poison, though IMO about 600 px is the maximum width for a line before it's horrible to read on a full hd screen.


This is a solved problem.

   max-width: 600px;
This stops your text from being excessively wide, but also doesn't prevent smaller screens from making it more narrow.


Thats a pretty good way, but it's not dpi independent.


That's partially true. A CSS pixel isn't necessarily the same as a screen pixel. A Mac with a retina display set to "native" resolution, for example, should actually make that 1200 pixels wide (max). In general, though, I think most browsers will treat a css pixel as a screen pixel.

Of course you could also use points or ems if you prefer.




Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: