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:
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".
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:
0
should not have a unit (wrong: 0px
, correct: 0
)50px
—even if you want it, use a relative unit like em
instead of px
because the former works better with zooming/text sizes)
maxWidth
tobreakpoints.full