2

For example, this page at SuperUser, the main content of the page is squished, so its hard to read or focus on it. I would like to take it from how it is currently rendered to this.

The after screenshot link is the best I could do to get my browser to render what I want to achieve with uBlock, I don't want to change the font size, just the width of the element.

According to the picker, the element I am interested in filling the browser width with is called superuser.com###content.

I first tried this but it does not seem to have any affect:

superuser.com###content:style(width: 100vw !important;)

!Hide Right Sidebar
superuser.com##.js-sticky-leftnav.left-sidebar--sticky-container
!Hide Left Sidebar
superuser.com##.ps-relative.js-pinned-left-sidebar.left-sidebar

Then I tried:

superuser.com###mainbar > div:style(width:100vw !important;)

!Hide Right Sidebar
superuser.com##.js-sticky-leftnav.left-sidebar--sticky-container
!Hide Left Sidebar
superuser.com##.ps-relative.js-pinned-left-sidebar.left-sidebar
! This gets in the way too
superuser.com##.show-votes

But I just end creating a whole new mess, as shown here. Any further changes I just end making it worse. I pieced together most of this by looking at other questions and searching for CSS properties such as 100vw.

I don't seem to be getting anywhere though. Can anyone show me how to do this properly? I would greatly appreciate an example.

Destroy666
  • 6,771
Ralf_Reddings
  • 289
  • 1st image shows as removed, 2nd shows a narrow column. Please check your links. – Tetsujin Sep 18 '23 at 18:20
  • @Tetsujin hey pardon me, I corrected the removed image link. As for the other one, the best way I could render an example of it filling the browser windows width was to zoom in all the way with the browsers zoom in function. I made note of that at "he after screenshot link is the best I could do to get my browser to render..." – Ralf_Reddings Sep 18 '23 at 18:27
  • OK, thanks. You can remove the left sidebar in prefs, once you're signed in. There is a width limit, though, whatever viewport you have [which I also find irritating, see - https://i.stack.imgur.com/r84hj.png ]. The right sidebar stays. idk anything about uBlock, so I'll leave that to others more competent. Wish you luck. – Tetsujin Sep 18 '23 at 18:38
  • 1
    The best tool is probably GreaseMonkey. – harrymc Sep 18 '23 at 19:10

1 Answers1

1

This does the trick:

superuser.com###sidebar
superuser.com###left-sidebar
superuser.com##.container:style(width: 100% !important; max-width: 100% !important;)
superuser.com###content:style(width: 100% !important; max-width: 100% !important;)

You need to check every related element that sets width, browser's Inspect element type of functionality and reviewing nearby HTML is required. You missed .container. The 2nd problem is lack of max-width manipulation, which overrules width.

Also, use IDs wherever available rather than classes. You want to be as specific as possible with this kind of tools.

Destroy666
  • 6,771
  • "use IDs wherever available rather than classes. You want to be as specific as possible with this kind of tools." got it! will keep that in mind for sure. Thanks – Ralf_Reddings Sep 19 '23 at 19:38