When using Quartz, the default template has a left and right sidebar on larger desktop displays. When you shrink the display size a bit, the sidebars disappear, and the layout reorganizes to show the site title and search above the content, the Graph, and Backlinks components below the content.

We can update our template CSS if we want to use the smaller layout and never show the sidebars.

Add the following CSS to the custom.scss file in the quartz/styles directory. We’re taking the CSS elements in the @media queries in the base.scss and moving them out of the @media element.

@use "./base.scss";
@use "./variables.scss" as *; 

#quartz-body { width: $pageWidth !important; display: flex !important; flex-direction: column !important; margin: auto; }

.page > #quartz-body .sidebar { position: initial !important; flex-direction: row !important; padding: 0 !important; width: initial !important; margin-top: 2rem !important; }

#quartz-body .left { left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); gap: 0 !important; align-items: center !important; }

#quartz-body .right { right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); & > * { flex: 1 !important; } }

.page-header { width: initial !important; margin-top: 2rem !important; } .center,footer { width: $pageWidth !important; }

✴️ Also on Micro.blog ✍️ Email