Please fix site CSS for high resolution screens

Site Feedback
1

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("https://www.epiusers.help/") {
    @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:

image
image2557×427 103 KB

And this:

image
image2558×778 214 KB

To this:

image
image2558×662 131 KB

And this:

image
image2559×801 314 KB

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
2

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.

3 Likes
3

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

Normal layout, 1080p, 80% zoom:

image
image1920×479 116 KB

Modified layout, 1080p, 80% zoom:

image
image1920×527 103 KB

4

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.

3 Likes
5

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

6

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

4 Likes
7

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

8

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.

https://www.epiusers.help/?mobile_view=1

9

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

10

anyone else get scrollbars?

image
image1661×825 40.5 KB

11

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

image
image958×730 161 KB

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.

12

This is gold.

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

14

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

:joy:

15

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

16

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

2 Likes
17

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

1 Like
18

Sacrilege!

19

Literally pasted your css in without the prefix stuff

21

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

22

This is the entire content of the modification / component.

image
image763×698 19.5 KB

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

1 Like