Increase width of content column in Docusaurus

Question

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.

Answer 1

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.