← All posts

Tutorials

Hide sidebars and comment sections for good

17 May 2026 · by JustZix Team

An article is a few hundred words of text surrounded by an arena of distractions: trending rails, sticky share bars, autoplay panels, and comment sections that rarely repay the scroll. JustZix lets you delete the arena and keep the article.

Find what to remove

Open the page, right-click the offending block, and choose Inspect. Note its tag, id, or a stable class. You are looking for a selector specific enough to hit only the noise. Generic words like sidebar, related, recommended, and promo show up in class names across most sites.

The core hide block

Start with a list of the usual suspects. display: none removes the element entirely, reclaiming its space:

aside,
.sidebar,
#sidebar,
.related-articles,
.recommended,
.trending,
.most-popular,
.promo, .ad-slot {
  display: none !important;
}

Add or remove selectors per site. If something you want disappears, delete the line that caught it.

Banish the comment section

Comment widgets are heavy, slow, and often a sink of bad faith. Hiding them speeds up the page and protects your mood:

#comments,
.comments,
.comment-section,
#disqus_thread,
.fb-comments,
[id*="livefyre"] {
  display: none !important;
}

Kill the sticky clutter

Sticky headers, floating share bars, and chat bubbles follow you down the page. Some you want gone; for others, just stop them sticking:

.share-bar,
.floating-cta,
.chat-widget,
[class*="cookie-banner"] {
  display: none !important;
}
header.sticky,
.site-header {
  position: static !important;
}

Switching a header from fixed or sticky to static keeps navigation available but stops it eating screen space while you read.

Reclaim the column

Once a sidebar is gone, the main column often stays at its old narrow width with empty space beside it. Stretch it back out:

.main-content,
.content-area,
article {
  width: 100% !important;
  max-width: 72ch !important;
  margin-inline: auto !important;
  float: none !important;
}

The float: none undoes legacy float layouts; the max-width then keeps the now-centered text at a readable measure.

A safer alternative to display none

If hiding an element breaks a script that expects it, neutralize it visually instead:

.related-articles {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

Save it as a rule

Create a JustZix rule, set the URL pattern to your target site, paste the blocks you need into the CSS pane, and save. Reload the article — the noise is gone and the text stands alone. Build one rule per site you read often, since selectors vary.

A decluttered page pairs perfectly with a warm background and a tuned column. See build your own reader mode for the full treatment, grab presets from our ready-made examples, and download JustZix to start cutting the clutter.