You can use a UserScript to edit the StackOverflow web page and increase the width of the main content:
- Install the Tampermonkey browser extension, for either Google Chrome or Mozilla Firefox.
- Login to StackOverflow with your account and enable Settings ➔ Interface ➔ Hide left navigation.
- In the Tampermonkey dashboard, create a new UserScript with the following code (including all the comment lines):
// ==UserScript==
// @name StackOverflow larger width layout
// @namespace stackoverflow_larger_width
// @version 1
// @description StackOverflow larger width layout
// @author Author
// @match https://*.stackoverflow.com/*
// @match https://*.serverfault.com/*
// @match https://*.superuser.com/*
// @match https://*.askubuntu.com/*
// @match https://*.mathoverflow.net/*
// @match https://*.stackapps.com/*
// @match https://*.stackexchange.com/*
// @match https://stackoverflowteams.com/*
// @match https://*.web.archive.org/web/*/https://stackoverflow.com/*
// @match http://*.web.archive.org/web/*/https://stackoverflow.com/*
// @grant none
// ==/UserScript==
/**
* Use this to change the CSS style of elements in a web page.
* Use Firefox -> Tools -> Web Developer -> Inspector; or
* Google Chrome -> View -> Developer -> Developer Tools -> Inspector,
* to see these CSS elements. Sources and help guides:
* https://somethingididnotknow.wordpress.com/2013/07/01/change-page-styles-with-greasemonkeytampermonkey/
* https://stackoverflow.com/questions/19385698/how-to-change-a-class-css-with-a-greasemonkey-script
*/
function addGlobalStyle(css)
{
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
// ===== Increase the area of the page content (Also applies to mobile responsive view) =======
addGlobalStyle('#content { padding: 10px !important; max-width: 1400px }'); // Originals: padding was 24px, max-width was 1100px
addGlobalStyle('html.html__unpinned-leftnav body > .container { max-width: 1400px; }'); // Original: max-width was 1100px
addGlobalStyle('#mainbar { width: 76%; }'); // Original: calc(100% - 300px - 24px);
addGlobalStyle('#sidebar { width: 21%; }'); // Right sidebar. Original size: 300px
- Enable the UserScript and reload the page.
Then you will see width of the main column has increased. Here is a before and after comparison for the page Mock a call to IQueryable using moq , using a browser window width of 1920 pixels.
As mentioned by User chivacq's comment, other people have also created similar UserScripts, like these: https://github.com/samliew/SO-mod-userscripts?tab=readme-ov-file#stack-exchange-wider-mode
site:meta.stackoverflow.com widescreen
into your favourite search engine. Even if you consider that the situation has changed, please edit your question to at least discuss why the main points no longer apply.status-planned
and "This is something we (ux) have been thinking about." on a question that was just unilaterally promoted to "the request" by removing its link to previous discussion and stance going in the opposite direction.