1

The issue

I'm seeing a lot of websites these days with unused or empty space taking up 1/3 or more of the horizontal width of web pages.

What I'm looking for

I'm trying to figure out if there is a way to remove or decrease the unused horizontal space on webpages. This occurs for many reasons but typically it's due to:

  1. An HTML element that specifies the max-width CSS property.
  2. An HTML element or one of it's classes is referenced in a @media (max-width: <pixel-amount>) query.

Examples

Example 1

The absolute perfect example is https://stackoverflow.com
Here is an image of what I see to be even more clear about the problem: stackoverflow.com webpage

Example 2

Here is a stackoverflow example where I think it would be very helpful if I could read/see more of the accepted answer without having to scroll up/down constantly.
The main content of the page (question/answer section) only takes up 34% of the pages width at 100% zoom in Chrome 92 when I am full screen with a 1920x1080 resolution.
Link to page in this example image stackoverflow's question/answer page

What I've tried

Using the uBlock Origin browser extension I can block elements from appearing on a web page. Depending on how the sites HTML is structured, this occasionally yields the desired effect. It may be possible to block a specific elements CSS property with uBlock Origin (currently trying to figure out).

Possible leads

The content width for many websites such as stackoverflow or stackexchange seems to stop increasing after a specified max-width media query. Or if an HTML element has the max-width CSS property set.

On stackoverflow.com, if I remove the class: body>.container max-width CSS property and do the same for the CSS selector: #content, this resolves the problem on stackoverflow but the changes are reset after reloading the page. I'm assuming solutions for other sites are probably very similar to this or require a change to a class that is referenced in a @media (max-width: <pixel-amount>) query.

Mermaid Man
  • 69
  • 6

2 Answers2

2

You can permanently modify CCS properties of any site using uBlock Origin.

Open uBlock's options and go to filters and add the following to make stackoverflows content not have a max width:

  • stackoverflow.com##.container:style(max-width: none !important)
  • stackoverflow.com###content:style(max-width: none !important; width: 100% !important) What the filters tab should look like in uBlock

Don't forget to hit Apply Changes in uBlock!

You would do the same for other sites except you probably will need to change the site and class/selector Depending on your browser, the code might be a little different.

The Result

Proof that stackoverflow content fits screen width

Mermaid Man
  • 69
  • 6
-1

Super helpful!

I had a similar issue with recent seekingalpha.com redesign only using 40-50% of my screen width, and this really helped.

  • seekingalpha.com##.F-aZ.F-a2.F-aU.F-z:style(max-width: none !important)
  • seekingalpha.com##.dr-qB:style(max-width: 80% !important)
Marcel
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 13 '23 at 09:12