# A hack to reduce whitespace and scrolling

**URL:** <https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224>\
**Category:** About This Message Board\
**Created:** [June 23, 2020, 3:16am UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224 "2020-06-23T03:16:36Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![AnalogSignal](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/analogsignal/32/1085_2.png) [@AnalogSignal](https://boards.straightdope.com/u/AnalogSignal)\
**Post date:** [June 23, 2020, 3:16am UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/1 "2020-06-23T03:16:36Z")

</div>

Using the browser extension Stylish, I created a basic style to reduce whitespace and the need for so much scrolling. This could be a little tricky to set up if you are not technically inclined. It essentially hacks the CSS in your browser to compress the gaps between posts. For better or worse, it hides the Reply bar at the bottom of each post. If needed, you can quickly disable/enable the style from Stylish to show/hide the Reply bar.

This is a Before and After picture which demonstrates the impact of the style:

[![](https://i.imgur.com/MUuaAwv.png) ](https://i.imgur.com/MUuaAwv.png)

This is the definition of the style:

> nav.post-controls {  
> display: none !important  
> }
> 
> section.post-menu-area {  
> display: none !important  
> }
> 
> .topic-body {  
> margin-bottom: 10px !important  
> }

Here is where you can get the Stylish extension:  
[https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en)

> **[Stylish - Custom themes for any website – Get this Extension for 🦊 Firefox...](https://addons.mozilla.org/en-US/firefox/addon/stylish/)**
>
> Download Stylish - Custom themes for any website for Firefox. Stylish lets you customize any website with custom user styles (themes for websites). Choose from the largest userstyles library to change the color scheme, background, and skin for...

---

<div class="post-metadata">

**Author:** ![AHunter3](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/ahunter3/32/368_2.png) [@AHunter3](https://boards.straightdope.com/u/AHunter3)\
**Post date:** [June 23, 2020, 4:44am UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/2 "2020-06-23T04:44:40Z")

</div>

Trying

---

<div class="post-metadata">

**Author:** ![Do\_Not\_Taunt](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/do_not_taunt/32/2968_2.png) [@Do\_Not\_Taunt](https://boards.straightdope.com/u/Do_Not_Taunt)\
**Post date:** [June 24, 2020, 3:40pm UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/3 "2020-06-24T15:40:25Z")

</div>

First, thanks so much @AnalogSignal! I noticed it removes the reply and edit buttons from each post - is that intentional? I get that they take up a lot of space, but this non-visual designer assumes there must be a way to compress them without removing them, and still have a palatable appearance. In addition to sucking at visual design, I also kinda hate CSS, but I might play around with it if I get some minutes later today.

---

<div class="post-metadata">

**Author:** ![RTFirefly](https://avatars.discourse-cdn.com/v4/letter/r/c77e96/32.png) [@RTFirefly](https://boards.straightdope.com/u/RTFirefly)\
**Post date:** [June 24, 2020, 3:57pm UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/4 "2020-06-24T15:57:24Z")

</div>

OK, call me tech-illiterate, but I’ve downloaded Stylish. [ETA: I guess technically I’ve added the Stylish extension.] Now what??

---

<div class="post-metadata">

**Author:** ![AnalogSignal](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/analogsignal/32/1085_2.png) [@AnalogSignal](https://boards.straightdope.com/u/AnalogSignal)\
**Post date:** [June 24, 2020, 4:07pm UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/5 "2020-06-24T16:07:08Z")

</div>

> [@Do\_Not\_Taunt](#):
>
> I noticed it removes the reply and edit buttons from each post - is that intentional? I get that they take up a lot of space, but this non-visual designer assumes there must be a way to compress them without removing them, and still have a palatable appearance.

I did try to reduce the size of the Reply bar but couldn’t get it to work so I just hid it. It is a brute force approach but it is simple enough to toggle Stylish on and off.

Of course, if you have a way of improving this, it would be more than welcome.

---

<div class="post-metadata">

**Author:** ![AnalogSignal](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/analogsignal/32/1085_2.png) [@AnalogSignal](https://boards.straightdope.com/u/AnalogSignal)\
**Post date:** [June 24, 2020, 4:08pm UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/6 "2020-06-24T16:08:46Z")

</div>

> [@RTFirefly](#):
>
> OK, call me tech-illiterate, but I’ve downloaded Stylish. [ETA: I guess technically I’ve added the Stylish extension.] Now what??

There are YouTube videos that explain how to use Stylish. I may also try to write out the other steps more clearly if I have time.

---

<div class="post-metadata">

**Author:** ![Do\_Not\_Taunt](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/do_not_taunt/32/2968_2.png) [@Do\_Not\_Taunt](https://boards.straightdope.com/u/Do_Not_Taunt)\
**Post date:** [June 24, 2020, 4:09pm UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/7 "2020-06-24T16:09:07Z")

</div>

> [@AnalogSignal](#):
>
> I did try to reduce the size of the Reply bar but couldn’t get it to work so I just hid it. It is a brute force approach but it is simple enough to toggle Stylish on and off.

Yeah, I ended up disabling it because I use those buttons.

> [@](#):
>
> Of course, if you have a way of improving this, it would be more than welcome.

Not promising anything! I confessed to my limitations above.

---

<div class="post-metadata">

**Author:** ![RTFirefly](https://avatars.discourse-cdn.com/v4/letter/r/c77e96/32.png) [@RTFirefly](https://boards.straightdope.com/u/RTFirefly)\
**Post date:** [June 24, 2020, 10:14pm UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/8 "2020-06-24T22:14:16Z")

</div>

> [@AnalogSignal](#):
>
> There are YouTube videos that explain how to use Stylish. I may also try to write out the other steps more clearly if I have time.

Could you link to a good one? I’ve checked out a few, and the ones I’ve seen don’t explain anything worth shit. And while sucking in that respect, they play crappy music at me for good measure.

---

<div class="post-metadata">

**Author:** ![AnalogSignal](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/analogsignal/32/1085_2.png) [@AnalogSignal](https://boards.straightdope.com/u/AnalogSignal)\
**Post date:** [June 24, 2020, 10:25pm UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/9 "2020-06-24T22:25:53Z")

</div>

> [@RTFirefly](#):
>
> Could you link to a good one? I’ve checked out a few, and the ones I’ve seen don’t explain anything worth shit. And while sucking in that respect, they play crappy music at me for good measure

I’m not sure how good this is but I watched this one to refresh my memory:

[![](https://img.youtube.com/vi/fCVvGwoF5cQ/maxresdefault.jpg "How to make a custom theme with stylus for userstyles (Basics)") ](https://www.youtube.com/watch?v=fCVvGwoF5cQ)

---

<div class="post-metadata">

**Author:** ![Briny\_Deep](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/briny_deep/32/17188_2.png) [@Briny\_Deep](https://boards.straightdope.com/u/Briny_Deep)\
**Post date:** [June 25, 2020, 1:19am UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/10 "2020-06-25T01:19:54Z")

</div>

This is awesome! But I think your Youtube link is to a Stylus tutorial, not Stylish. I’m a tech idiot and was able to get it running quick without any videos. Spoiler alert:

IT WORKS!

I made some screenshots from Firefox, but I’m not allowed to put them in a reply (is this because of my Guest status?) I’ll try to describe. Again, this is for Firefox:

First install the extension, then in the Add-ons Manager, click the three horizontal dots next to the Stylish on-off toggle.

Then click Options in the dropdown. A new browser tab opens up. In the left panel, click Write New Style. Then in the big box on the right side, paste in the code provided by **AnalogSignal** above. Give it a name and hit Save. I ignored some warnings about the code – they caused me no problems.

Finally, in the upper RH corner of your browser (usually – I guess), click on your new add-on button. Toggle on and off by clicking “Stylish On” or “Stylish Off”. You may need to refresh the page.

Worked like a charm. A real improvement – thanks, **AnalogSignal**!

---

<div class="post-metadata">

**Author:** ![AnalogSignal](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/analogsignal/32/1085_2.png) [@AnalogSignal](https://boards.straightdope.com/u/AnalogSignal)\
**Post date:** [June 25, 2020, 1:25am UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/11 "2020-06-25T01:25:31Z")

</div>

I’m glad you got it to work. I also really appreciate you providing instructions! I suffer from RSI so my ability to type these days is limited.

> [@Briny\_Deep](#):
>
> But I think your Youtube link is to a Stylus tutorial, not Stylish.

Yes, but Stylus is a clone of Stylish so it is 98% the same.

---

<div class="post-metadata">

**Author:** ![RTFirefly](https://avatars.discourse-cdn.com/v4/letter/r/c77e96/32.png) [@RTFirefly](https://boards.straightdope.com/u/RTFirefly)\
**Post date:** [June 25, 2020, 12:02pm UTC](https://boards.straightdope.com/t/a-hack-to-reduce-whitespace-and-scrolling/912224/12 "2020-06-25T12:02:58Z")

</div>

Thanks, **masonite**!! I’m using Chrome, so things weren’t _exactly_ the same, but close enough that I could follow. And now no more white space within/between posts!

And yeah, there’s a button that lets me toggle it on/off like you say. Same in Chrome as in Firefox.

Cool beans!!
