Can we change the width of the site to a percentage instead of a fixed pixel?

Site Feedback
1

I have a wider 2k monitor and it’d be nice to see more of the page at a time instead of having the width of the container wrapped and limited to 1,170px - creating huge side borders.

Something like 90% would be great, or even 80%.

Is there a reason the site is using a fixed pixel width instead of a percentage?

2

I think the design reason is that it’s hard for the eye to track lines of text that long. I think most browsers support per-site user stylesheets, so you could override the width for yourself?

1 Like
3

I use https://chrome.google.com/webstore/detail/scripty-javascript-inject/milkbiaeapddfnpenedfgbfdacpbcbam
I prefer to keep the installed extensions to a minimum I use scripty for everything like this. (A CSS injector may be more polite, but meh, we’re programmers!)

For this site, create this script: -

var t = setInterval(function() {
  var mo = document.querySelector("#main-outlet");
  var posts = document.querySelectorAll("div.topic-body.clearfix");
  if (mo == null || posts == null)
    return;
  clearInterval(t);
  mo.style.maxWidth="80%";
  for (var i = 0; i < posts.length; i++)
    posts[i].style.width="100%";
}, 1000);

Set it to URL containing discourse.cakephp,org and have it run automatically on page load.
Tweak the numbers / elements as you see fit.

The loop is needed as not all DOM elements have loaded On Page Load

Edit: some posts with long text in quotes will scroll right - there’s some funky grid action going on I can’t pin down. But as its only a few posts I stopped trying to fix.
Edit: Edit: The website fights back, maybe some responsive code somewhere - in which case remove the ClearInterval(t) and just have this loop running every second!

1 Like
4

Thanks @Zuluru and @Jawfin! I was able to find a firefox custom styles called Stylus. Does the exact thing I’ve been looking for :slight_smile: