How to widen the width of the content and move the content to the left

[kurt-krueckeberg]

First, thanks for the Piccolo theme for Sphinx! The dark mode support is great to have in a theme.

What is the best way to widen the content width? And is it possible to move the content to the left, so its closer to the navigation?

[dantownsend]

Thanks! The dark mode definitely makes things easier on the eyes.

The best way to align the content to the left currently is to customise the CSS:

div.documentwrapper {
    margin: 0;
}

Similarly, to make the content wider:

div.documentwrapper {
    max-width: 60rem;
}

You should be able to add a custom CSS file using this.

I might add this as a proper feature, so it can be configured in html_theme_options.

[kurt-krueckeberg]

Thanks for the prompt reply. Having these options in html_theme_options would be fantastic.

[kurt-krueckeberg]

Actually, I needed this in my _static/custom.css:

div.document div.documentwrapper {
    margin: 0;
    max-width: 60rem;
}

[PedramNavid]

I had to do !important to get this to work for some reason.