hugo-coder
hugo-coder copied to clipboard
luizdepra
Increase page width to accommodate more content per line
Hello,
I wanted to increase the page width in the blog posts so that I could accommodate more content per line and reduce the padding/margins on the left and right of the page. I was able to edit the max-width: 90rem; line to 100rem under the _base.scss file in the hugo-coder/assets/scss/ directory and get what I wanted.
I was wondering if there is a way I could do this without disturbing the theme content sub modules.
Try 1 - I see we have an option to add custom scss files under config.toml file in the root directory. I went ahead and tried adding the _base.scss file to the statisc/scss directory, and adding it to the config.toml file under CustomSCSS line. But it didn't work.
Try 2 - Also, I tried just adding the file to the /statisc/scss/_base.scss and removing the change in the config.toml file as per the suggestion mentioned here #305. But that didn't work either! I'm wondering if I'm doing something wrong. Looking for advice, thanks.
The easiest way is to create a custom CSS or SCSS file overriding the .container class, and add it into you config.toml. I do something like this in my own project. See here and here.
The other option is to override the _base.scss file. I think you was trying to do that. You need to put this file in the same path as the original from the theme. So, add it to assets/scss/_base.scss and not inside static. Note, you will be overriding the entire file, so you will need to copy it all its content and just change the value you need.
Also, you will have to use the hugo-extended version to compile the SCSS files.
Thanks! It worked :)
Also, how do we modify the font size of the title in the posts? I tried changing the font-size: 3.2rem; tag under the h1 section in the __base.scss file like you suggested in the option 2 (which worked for the width), but it didn't work for the font size. The h2 section seems to be affecting the side headings within the posts. Thoughts?
All the hx rules from _base.scss are normally used to style the markdown content. I think what you need to override is inside _content.scss, probably this line.
Yes! my bad, you are right. I wasn't looking at the other files. Changing the _content.scss did the trick! I modified it to 3.2rem and it looks perfect with the changes I did in the _base.scss.