4 ms·
> 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.
by terminalcommand 8y ago
> 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.