Custom width for sidebar in Cassiopeia

13 May 2025 1 min read

Cassiopeia gives the sidebar 25% of the width on large screens. Change it to 30/70 or 40/60 with a few lines in user.css or the SCSS grid variables.

If you’ve built a Joomla site using the new Cassiopeia template (introduced in Joomla 4), you may have noticed that by default the sidebar occupies 25% of the viewport on large screens, while the main content takes the remaining 75%.

But what if you want a more balanced 30/70 or even a 40/60 split? With a few CSS tweaks,or by adjusting SCSS variables if you’re using a build pipeline,you can easily customize those widths.

add this to custom css

/* Adjust sidebar and main content widths on large screens (≥992px) */
@media (min-width: 992px) {
/* Sidebar ➔ 33.33% of container */
.l-cassiopeia .grid-item--sidebar {
flex: 0 0 33.3333% !important;
max-width: 33.3333% !important;
}
/* Main content ➔ 66.66% */
.l-cassiopeia .grid-item--main {
flex: 0 0 66.6667% !important;
max-width: 66.6667% !important;
}
}

This article provides a helpful starting point for customizing the sidebar width in the Cassiopeia Joomla template. Beyond the provided code snippet, consider these extensions:

Stuck on something else?

Doctor Joomla is a project of Cloudfaction, a Dutch agency building and maintaining Joomla sites since 1999. The articles are made with the help of AI, so tell us if something does not match your screen. Mail info@cloudfaction.nl if you want someone to look at yours.

Doctor Joomla is a Cloudfaction project.