Full width in the Docs theme

[Ioan-Popa]

Hello everybody.

Context:

  "dependencies": {
    "next": "14.2.16",
    "nextra": "^3.2.3",
    "nextra-theme-docs": "^3.2.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "14.2.16",
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }

Concerning the Docs theme, it seems that the width of the content column is limited to 90rem, which causes a Nextra application using this theme to have a significant portion of the viewport (columns to the left and to the right) to remain unused. This is very visible on wide displays.

Is it possible to get the content column to occupy the entire available width globally?

Thank you.

[marcelomafradev]

Hi. I had the same question a few hours ago. Solution:
You need to create a file to override the default css, like an overrides.css and import it in _app.ts. like:

import type { AppProps } from "next/app";
import "../app/globals.css";
import "./overrides.css";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

inside overrides.css

div:has(.nextra-content) {
  width: 100vw !important;
  max-width: 100vw;
}

.nextra-content {
  padding: 0 !important;
}

It's the best solution I've found.

[Ioan-Popa]

Thank you, Marcelo.

Your tip put me on the right path.

My project was JavaScript-based.

The entire content between the navigation bar at the top and the footer resided in the following block, which was the culprit:

<div class="_mx-auto _flex _max-w-[90rem]">
...
</div>

For some reason, the div:has(.nextra-content) selector did no work in my case.

The following CSS code worked, though:

div._max-w-\[90rem\]
{
  max-width: 100%;
}

main._max-w-6xl
{
  max-width: 100%;
}

The last block enabled the middle column (main content) to occupy its entire available width.

Unfortunately, this was a very dirty hack and I wish for the authors of the project to come with the proper solution.