Remove max-width from hugo example

Question

I've made a website using the academic theme of hugo; there's an example provided here. I want all of my posts (of which there are three examples provided at the link) to be wider. For example, a post initially looks like this: where the text is constrained within a more narrow window, but I want it to look like this: where the text has the same width as the page.

I notice that I can make this happen by unchecking the 'max-width' specification in '.article-container'. How can I edit my local files for my personal page with the academic theme to make it so this automatically happens?

Answer 1

This may be done by overriding the CSS in the .article-container selector.

.article-container {
   max-width: none;
}

The simpler way is to create a file layouts/partials/custom_head.html where you place the above CSS rule inside a <style>...</style> block.

Another way is to create a file assets/css/custom.css with that rule, and then updating the property plugins_css in the file config/_default/params.toml so that the new stylesheet can be included as part of the loaded stylesheets.

plugins_css = ["custom"]