15

Stack Overflow uses only a narrow horizontal area of my browser. How can I make Stack Overflow use 100% of the browser window's width?

This is how my page looks:

enter image description here

7
  • 12
    I⠀⠀ hear⠀⠀ they⠀⠀ even⠀⠀ like⠀⠀ excessive⠀⠀ whitespace⠀⠀ in⠀⠀ their⠀⠀ sentences Jan 17, 2022 at 9:33
  • 6
    Anyone else getting triggered by the +865 covering up the number of responses the OP has? 🙃
    – Thom A
    Jan 17, 2022 at 15:25
  • @Larnu I've posted a custom Styling to reduce the header size. That also replaces those numbers with small dots, similar to the review queue notification marker. You can find that here if you're interested: What time is it? It's time for another question about the new navbar! (compromise edition)
    – Tom
    Jan 17, 2022 at 15:48
  • 1
    Curious what resolution and browser size you're using.
    – BSMP
    Jan 17, 2022 at 19:26
  • This has been asked several times before, but those questions were all on the "old" MetaStackOverflow and have hence been relocated to MetaStackExchange.
    – Edward
    Jan 17, 2022 at 22:07
  • 3
    StackExchangeWiderMode userscript, change maxWidth to breakpoints.full
    – Samuel Liew Mod
    Jan 18, 2022 at 1:36
  • "How can I make Stack Overflow use 100% of the browser window's width?" Decrease browser window width manually?
    – Trilarion
    Dec 14, 2022 at 9:37

2 Answers 2

10

You can do that with a browser plugin which allows you to use custom CSS rules. I personally use Stylus (not Stylish) with these rules:

body > .container {
    max-width: inherit !important;
    padding: 0px 50px;
}

#content {
    max-width: inherit !important;
}

You can adjust the padding value to something different if you want. I use it so the left/right border doesn't look so "pressed".

9
  • I've tried it: screencast.com/t/Ccreh6hWe but it does not work. Jan 17, 2022 at 14:22
  • @user1580348 Have you activated that style using the stylus button (somewhere in your brower UI depending on settings)?
    – Tom
    Jan 17, 2022 at 14:24
  • It is activated: screencast.com/t/VeX3LigtenYD Here is the code: screencast.com/t/HaQYqoqllv Jan 17, 2022 at 14:30
  • This is how my SO page looks: screencast.com/t/N2GPEGGalpxi Jan 17, 2022 at 14:41
  • @user1580348 The header looks weird, those icons for notifications and reputation shouldn't overlap. Do you have other addons active or a strange zoom setting? And please make sure the browser you're using is one of the supported ones: stackoverflow.com/help/browser-support
    – Tom
    Jan 17, 2022 at 14:56
  • 1
    Now it works, after UNHIDING my left column hidden in SO Preferences: screencast.com/t/dUtACjiAIXGz Jan 17, 2022 at 14:59
  • 2
    @user1580348 Good to know. When adding !important to the first setting (see my update), when it works for both "left column" settings.
    – Tom
    Jan 17, 2022 at 15:16
  • What browser? Chrome? Is it this one? Jan 19, 2022 at 13:47
  • @PeterMortensen I'm using Firefox. Yes, that's the chrome version of the addon. But you could use any addon which allows you to define custom css rules for sites.
    – Tom
    Jan 19, 2022 at 21:39
2

If one already uses a userscript addon/extension (like Greasemonkey or Tampermonkey), a script adding that CSS to each Stack Overflow site could look like this:

// ==UserScript==
// @name         StackOverflow full width
// @version      2022-12-13
// @description  as per https://meta.stackoverflow.com/a/415356/4299358
// @author       https://meta.stackoverflow.com/users/3824919/tom & https://stackoverflow.com/users/4299358/amigojack
// @match        https://*stackoverflow.com/*
// @match        https://*.stackoverflow.com/*
// ==/UserScript==

(function() {
  'use strict';

  var css= document.createElement( 'style' );  // New HTML element
  css.appendChild
  ( document.createTextNode  // New content to that element
    ( 'body > .container { max-width: inherit !important; padding: 0 } \n'  // No padding at all
    + '#content { max-width: inherit !important }'  // CSS needs no trailing semicolon
    )
  );
  css.setAttribute( 'type', 'text/css' );  // Enforce MIME type
  document.getElementsByTagName( 'head' )[0].appendChild( css );  // HEAD should always exist
})();

Fixes from the original:

  • a value of 0 should not have a unit (wrong: 0px, correct: 0)
  • no margin to the right and left at all (previously 50px—even if you want it, use a relative unit like em instead of px because the former works better with zooming/text sizes)
  • removing redundant semicolons

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .