I’m trying to increase the width of posts and/or widgets but can’t find the appropriate settings in the css. I want all pages to take the entire width of the screen, not just 2/3 in the middle. I’m mainly concerned with the custom widget but the issue seems to apply to posts as well as here for example (I hope Alison is fine with me using her website as an example, if not I’ll delete the link):
Looks like it’s using bootstrap and after a super cursory look at the page source and browser dev tools, the relevant css would be the container, article or article-container classes. Just look at it in your browser’s dev tool view, and you can see what css is being applied.
That being said, if you set post content too wide, it’s tiring to read. In my opinion, Academic has it set correctly given the type size and what I can see in a couple browsers, but ymmv.
Thanks a lot! For the next noob like me (I had to search a bit): Rick is talking about the academic.css file where (currently in line 654 under heading “Blog Articles”) you will find a hard coded max width of 760 pixels. Just change that number and thats it. If you dont find it, search for “.article-container” in the css.
Thanks again Rick!
Sure. That’s fragile though, because if you update theme files directly and then update the theme, your changes will get overridden. You should override theme files or, link your own css and override any classes.
You can copy theme files to the same path in your project, and edit them to override.
The lookup order gives a hint.
update: A lot of stuff changed in the last hugo updates including the ease of doing this. Now, look for the _content.scss file under “themes - hugo-academic - assets - scss - academic”. There you can see the .article-container entry and you can change it here. I think Ricks comment still applies (when you update the theme, this will be overwritten) but at least it works across several build_sites(). I haven’t gotten my own .scss file to overwrite this yet. An attempt can be seen here:
This topic is OT.