Why doesn't HN use responsive units?

> The problem is that if I zoom, the line-width gets out of hand and it gets hard to read the comment threads.

One question. On desktop, do you by chance have your browser window maximized?

If so, try an experiment. Demaximize your browser window, make it full screen height, but about 1/2 (or a bit more) screen width.

Then see if the line length goes out of hand.

If your browser is not maximized, well then this experiment will be of no benefit.

> Demaximize your browser window, make it full screen height, but about 1/2 (or a bit more) screen width.

This works, the line-width does not get out of hand. It even switches to full screen view and removes the margins.

If I use a narrower window, there is no problem. But if I use any window bigger than 1400px, the line-width becomes an issue.

I think the problem may lie in the screen specific CSS of HN, there is no custom CSS after 1349px max width:

  @media only screen and (min-width : 300px) and (max-width : 389px) {
    .comment { max-width: 270px; overflow: auto }
    pre { max-width: 200px; }
  }
  @media only screen and (min-width : 390px) and (max-width : 509px) {
    .comment { max-width: 350px; overflow: auto }
    pre { max-width: 260px; }
  }
  @media only screen and (min-width : 510px) and (max-width : 599px) {
    .comment { max-width: 460px; overflow: auto }
    pre { max-width: 340px; }
  }
  @media only screen and (min-width : 600px) and (max-width : 689px) {
    .comment { max-width: 540px; overflow: auto }
    pre { max-width: 400px; }
  }
  @media only screen and (min-width : 690px) and (max-width : 809px) {
    .comment { max-width: 620px; overflow: auto }
    pre { max-width: 460px; }
  }
  @media only screen and (min-width : 810px) and (max-width : 899px) {
    .comment { max-width: 730px; overflow: auto }
    pre { max-width: 540px; }
  }
  @media only screen and (min-width : 900px) and (max-width : 1079px) {
    .comment { max-width: 810px; overflow: auto }
    pre { max-width: 600px; }
  }
  @media only screen and (min-width : 1080px) and (max-width : 1169px) {
    .comment { max-width: 970px; overflow: auto }
    pre { max-width: 720px; }
  }
  @media only screen and (min-width : 1170px) and (max-width : 1259px) {
    .comment { max-width: 1050px; overflow: auto }
    pre { max-width: 780px; }
  }
  @media only screen and (min-width : 1260px) and (max-width : 1349px) {
    .comment { max-width: 1130px; overflow: auto }
    pre { max-width: 840px; }
  }

The interesting bit is, that if I try to load HN on responsive view in developer tools (ctrl+shift+m) and adjust the screen size to 1920x1080, the site displays without any problems, with bigger fonts and saner defaults.

But if I open HN on a regular tab with the same pixel size, fonts get super small.

The problem becomes more annoying, if you use a tiling window manager such as i3. Then you have to open another frame and adjust the size of the window.

Even on regular window managers, it is annoying to have to make the browser window smaller to browse HN.

HN works fine for me..like every other website. I suggest the problem is with your setup and not with HN.

Could you elaborate a bit?

What is your screen resolution? Do you use text scaling?

Do you open your browser in maximized view or do you prefer smaller windows?

Alternatively, you can also use UserJS to modify the font size and layout of HN on your browser.

~ Khayri R.R. Woulfe

I am doing this right now, but I think we can solve this issue without needing user styles.

HN looks super sharp and usable on mobile, why not achieve some usability on desktop as well. All that is required is a simple media query for browser windows larger than 1400px in width or using responsive units.