HACKER Q&A
📣 bloopernova

CSS filter to set a max width of Hacker News?


I'm trying to use uBlock Origin's "My Filters" page to set the maximum width of comments pages, like this one: https://news.ycombinator.com/item?id=39692801

I've got a filter already that does the right thing for comments:

    news.ycombinator.com##.comment:style(max-width: 70ch !important; overflow: hidden !important;)
And this is what I've tried for the headline/article text:

    news.ycombinator.com##table.hnmain:style(min-width: 500px !important; max-width: 500px !important;)
but the headline/article text and the first comment box are still taking up most of the width of the screen: https://gist.github.com/aclarknexient/ca490d4f7a2bedb2c06965fe918e127a

I'm not a CSS expert, and the Firefox devtools don't seem to update the table width for me, so I'm wondering if there's something script-ish going on.

I would be very appreciative if anyone could help!

EDIT: The dark mode is made via this filter:

    news.ycombinator.com##html:style(filter:invert(95%) hue-rotate(200deg); background: white;)

  👤 Leftium Accepted Answer ✓
This is my userstyle for HN, which properly limits the widths:

    @-moz-document domain("news.ycombinator.com") {
        body {
            margin: 0;
        }
    
        .toptext,
        .comment {
            max-width: 685px;
            font-size: 1.2em;
            font-family: sans-serif !important;
            line-height: 1.2;
        }
    
    
        pre {
            font-family: monospaced !important;
            max-width: none;
            padding-bottom: 14px;
            font-size: 1em;
        }
    
        td.title {
            font-family: sans-serif !important;
            font-size: 1em;
    
        }
    
    }
Loosely based on https://userstyles.org/styles/78384