docusaurus

Increase width of content column in Docusaurus

I'm using Dousaurus V3.

I want to increase the width of the center column where the markdown content i rendered. The screenshow is from the Docusaurus docs site, which has a width of 990px. My own site has a width of 825px.

Probably using the custom.css file, how can I increase the width? And also account for mobile view and smaller screens.

enter image description here

Solution

  • Yes, you can override necessary styles in custom.css file. Override following css custom properties based on your UI requirements:

    --ifm-container-width-xl: 1320px (default value)
--ifm-container-width: 1140px (default value)

    In your custom.css you can do like this:

    :root {
  --ifm-container-width-xl: 1600px;
  --ifm-container-width: 1280px;
}

    Don't forget to put correct width value as this is only example.