Please fix site CSS for high resolution screens

Hi folks,

The site looks kind of dumb on high resolution displays, in 1440p over half the maximized window is lost in gigantic margins, and at the same time I am constantly having to deal with line wraps as I try to read code on here…

With a couple of simple tweaks, using the browser addon Stylus, I have had the following styles injected into this site for a while now. I have wrapped the thing in a media query so it doesn’t affect the responsive phone layout.

@-moz-document url-prefix("") {
    @media only screen and (min-width: 900px) {
        .wrap {
          max-width: 80%;

        .container.posts {
          grid-template-columns: 80% 20%;

        .topic-body {
          width: 90%;

        .container.posts > .row {
          max-width: 100%;

        pre code {
          overflow: scroll;
          white-space: pre;

This makes the pages go from this:

And this:

To this:

And this:

I can live with using the addon, but the new layout looks better at all resolutions anyway, so I figured I might as well propose you implement it site-wide…

1 Like

I think this is a solid ask @jgiese.wci but I also dont mind seeing the tiny width because I know how my post will look for the rest of 99% of humanity who is still kicking it on 1080p.


Even in 1080p, try zooming out a bit… :wink:

Normal layout, 1080p, 80% zoom:

Modified layout, 1080p, 80% zoom:

I’ve created a component with this fix and enabled it for Dark, Light and Rainbow themes… Let’s see how many people’s cheese gets moved by this. I definitely think its too wide for my own taste, but I could get used to it.


UGH I’m having strong feelings about this one haha its causing my brain to go all wonky. The sentences on posts being longer than 80-90 characters is definitely abnormal makes it hard to read a paragraph. I’m throwing a poll on this let’s see how the “general” public feels about it.
We can always have a theme that is wider for those who like it…(or narrow)

What do you think about this change?
  • I like the wider site
  • I prefer it more narrow like it was before

0 voters

ugly, but source code looks much better on wide.
You need to repeat poll in a week, when everyone got used to it :grinning:


I mean, you could also just offer a new version of each theme users can choose instead, if it’s more democratic… :slight_smile:

I just found out @josecgomez that you can also just go to this url if you want a wide experience :slight_smile: not quite the same but an option.

Is there a place in between the two? A little wider is nicer but this width is more difficult to read. Don’t mind change and will use either setting…or a third.

And can’t we do media queries instead of voting on one setting?

Optimizing for Large-Scale Displays | CSS-Tricks - CSS-Tricks

anyone else get scrollbars?

In a narrow window, it looks much worse than before:

I am still holding down the one-monitor fort, so I tend to open the site in half of a 1920x1080 screen and this is not intelligent-looking…

Before, snapping it to half the screen would hide the blue margins entirely.

This is gold.

But I still don’t like my cheese moved. I’ll remember. I always remember.

Best argument for keeping these changes yet. Get out of the stone age bro!


I had my ad blocker on, but even with it off, advertisements are still fitting in the page properly here…

Multi-tasking is a myth. Break free, man.


Why are you snapping it to be half the screen then? :smirk:

1 Like


Literally pasted your css in without the prefix stuff

That’s original to the site I didn’t change anything else except added your code.

This is the entire content of the modification / component.

Since its affecting other things I’m turning it off for now.

1 Like