← All posts

Tutorials

Notion tweaks in JustZix — wider pages, fonts and focus mode

18 May 2026 · by JustZix Team

Notion is flexible about content but rigid about looks. A narrow text column, one font, no focus mode, database tables blurring into one grey blob. You cannot change that in the settings — but you can change it with a single JustZix CSS rule. This guide walks through six tweaks that genuinely change daily work in Notion, each as a ready-to-paste snippet.

Why CSS, not Notion settings

Notion deliberately keeps appearance under control — it wants every page to look the same on every device. That is reasonable for a team, but frustrating when you have a 27-inch monitor and the text uses one third of the screen. JustZix layers your CSS over notion.so in the browser: Notion knows nothing about the change, and you get your layout. The rule is scoped to the domain, so it works everywhere — your private workspace and the company one — without touching the account.

Wider pages and full width

Notion has a per-page "full width" toggle, but you have to flip it manually on every page. A CSS rule does it globally and lets you pick your own maximum width:

/* Wider content column on every Notion page */
.notion-page-content {
  max-width: 1100px !important;
  width: 100% !important;
}

/* The header (cover, title) lines up with the content */
.notion-page-content > .notion-cover,
.notion-page-content > [class*="layout"] {
  max-width: 1100px !important;
}

Set max-width to whatever suits your monitor — 900 px is comfortable reading, 1300 px is a spreadsheet-style variant. The .notion-page-content selector covers both ordinary pages and database pages opened as a record.

Focus mode — hide the sidebar and topbar

When you write a longer document, the left panel and the top bar only distract. Focus mode hides both and gives the content the whole screen:

/* Focus mode: hides the side navigation and the top bar */
.notion-sidebar-container {
  display: none !important;
}
.notion-topbar {
  opacity: 0;
  transition: opacity .2s ease;
}
.notion-topbar:hover {
  opacity: 1;
}

/* Content reclaims the space left by the hidden sidebar */
.notion-frame {
  margin-left: 0 !important;
}

The top bar does not vanish completely — it turns transparent and comes back when you hover, so you still reach the "Share" menu and page history. Keep this tweak as a separate rule and toggle it from the action bar when you want full navigation back.

Custom font and line-height

Notion offers three fonts. If you prefer a specific system typeface, or simply want more line-height for long reading, override it directly:

/* Custom font and looser line-height in the body */
.notion-page-content,
.notion-page-content [placeholder] {
  font-family: "Charter", "Iowan Old Style", Georgia, serif !important;
  line-height: 1.7 !important;
  font-size: 17px !important;
}

/* Headings stay sans-serif for contrast */
.notion-page-content h1,
.notion-page-content h2,
.notion-page-content h3 {
  font-family: "Inter", system-ui, sans-serif !important;
}

Styled callout and quote blocks

The default callouts and quotes in Notion are subtle to the point of invisible. Strengthen them so they actually catch the eye:

/* More prominent callout blocks */
.notion-callout-block {
  border-left: 4px solid #2f6fed !important;
  border-radius: 6px;
  background: rgba(47,111,237,.07) !important;
}

/* Quotes with a bigger, soft accent */
.notion-quote-block {
  border-left: 4px solid #888 !important;
  font-style: italic;
  padding-left: 16px !important;
}

/* Toggle blocks with a clearer label */
.notion-toggle-block > div:first-child {
  font-weight: 600;
}

Databases — zebra rows and sticky headers

Long database tables are hard to track with your eyes. Alternating row stripes and a header that sticks while you scroll solve both problems:

/* Zebra stripes in the table view */
.notion-collection-item:nth-child(even) {
  background: rgba(0,0,0,.035) !important;
}

/* Sticky table header while scrolling */
.notion-table-view-header-row,
.notion-collection-view-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
  background: var(--bg, #fff) !important;
}

/* A clearer line under the header */
.notion-table-view-header-row {
  border-bottom: 2px solid #ccc !important;
}

Hiding comments and code-block tweaks

Comment threads can be useful, but on a reference page they only clutter the margin. Code blocks, in turn, benefit from a bigger monospace face:

/* Hide comment threads in the margin */
.notion-discussion,
[class*="comment-thread"] {
  display: none !important;
}

/* More readable code blocks */
.notion-code-block {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 14px !important;
  border-radius: 8px;
  background: #1e1e2e !important;
}
.notion-code-block code {
  line-height: 1.55 !important;
}

If you prefer to merely collapse comments rather than hide them, swap in a JS rule that clicks the collapse buttons at document_idle — but for most pages a static display: none is enough.

Combining tweaks into a set

Each tweak above works on its own, but the real convenience is keeping them as separate, named rules: "Notion — wide pages", "Notion — focus mode", "Notion — zebra databases". Then from the action bar you turn on exactly what you need on a given page, and disable focus mode with one click when you want navigation back.

Ready-made rules for Notion are in our catalog — see the examples for notion.so, copy whatever fits, and tune it for your monitor. Install JustZix and reshape Notion to fit you in a few minutes.