lilatomic

Enwiden the Internet

Enwiden the Internet

It's very frustrating when sites have a constrained width and then insist on putting content that doesn't fit inside that width. This is most common with code listings, as these aren't wrapped. You have to scroll back and forth for each line.

But this is your browser, and you can override their stylesheets with a User Stylesheet. For example, here's how to add user stylesheet in Firefox. You then just need to jam max-width: none !important; and width: auto !important; on anything that looks like the main content.

General solution

Here's a fragment which does this for most things:

.document {
	max-width: none !important;
	width: auto !important;
}
.body,
html body.page {
	max-width: none !important;
	width: auto !important;
	padding-left: 1%;
	padding-right: 1%;
}

main {
	max-width: 100% !important;
	padding-left: 1%;
	padding-right: 1%;
	/* width: auto !important; */
}

Stackoverflow

Stack overflow has some internal objects that we want to hit:

body.question-page.unified-theme div.container {
	max-width: 100% !important;
	padding-left: 1%;
	padding-right: 1%;
}
html.html__responsive body.question-page.unified-theme div.container div#content {
	max-width: 100% !important;
	padding-left: 1%;
	padding-right: 1%;
}

Everything else

See the whole sheet as I add more things