Change page-width and fonts in your Hugo website

4-minute read
Sharan Katragadda
Website • Hugo
Featured image

As you write more and more articles, you may start to feel that you need more space on your website, more usable space. More real estate space is always better! Isn’t it? :)

The default “usable” page width we get from the Hugo framework and the theme I’m using is pretty low. It has a lot of white space on the left and right side of each page. It’s a pain to scroll down all the way to read my posts while most of it is white space. Not much of a pleasurable reading experience if you ask me.

Would you agree?

So, how do we reduce the margin space to accommodate more content in each line. I went through the process to make it better, and let me share you the tweaks I did.

There are multiple ways to achieve it. However, I found below two to be most flexible and convenient. The best part is, our changes lie within our custom directories and they do not mess the theme submodules. So, at any point in time if you feel you don’t need it, all you have to do is just remove the files, or rename them, and you are quickly back to the reset mode.

Two Options

  1. Create a custom.css file and include it in the config.toml file.
  2. Even better, just copy the _base.scss file to the root of your dir and update it to your liking.

Option #1: Create a custom.css file

  • Create a file and name it custom.scss under static/scss/ directory.
  • Copy below lines and add them to it.
.container {
  margin: 0 auto;
  // Adjusting the max-width to increase page width. 
  // The original file path - `/<website-root>/themes/<theme-name>/assets/scss/..`
  // max-width: 90rem;
  max-width: 100rem;
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
}
  • As you can see, the default value is max-width: 90rem;, and we are updating it to max-width: 100rem;
  • The number is just an estimate at this point, and you can always come back and change it later. :)
  • Update the config.toml file. Add custom.scss file to the customSCSS tag, like so.
# Custom SCSS
customSCSS = [["scss/custom.scss"]] ## Adding extra scss files
  • Remember, this doesn’t replace the existing .scss files. It just adds this change to the existing list. That’s it!
  • The SCSS files are same as the CSS, except that they dynamically generate CSS files during the compile time. You can get the same result by just creating a custom.css file and adding that to the static/css/.. directory.

Option #2: Copy the _base.scss file and modify it

I prefer this method as it gives us more flexibility. And the good part is, we don’t have to edit the config.toml file for this approach.

  • Copy _base.scss file from the /<website-root>/themes/<theme-name>/assets/scss/.. and paste it to the <website-root>/asset/scss/... If you don’t see those directories, go ahead and create them.
  • Modify the .container section as we discussed above. Just edit the 90rem to whatever you feel is appropriate. I choose 100rem
  • Keep in mind, you need all the contents of the file for this approach to work, unlike just the .container in the first approach. Just let the rest of the file stay the same.
  • That’s it!

You need hugo_extended

  • Just an FYI, you would need Hugo_extended version to make these settings work. If you are using CI/CD pipelines on your web server, then you may have to update your .yml files. Example, like below. NOTE - This step is not needed if you are using static files and uploading them to your public directory on your web server.

image: registry.gitlab.com/pages/hugo/hugo_extended:latest

Bonus Tip: How to adjust font size of the title

Now that we are done with the changes in the page content, I started to get little nit picky. I thought, wouldn’t it be nice to adjust the font size of the post title as well, so that it goes nicely with our page content? I know you thought so too, here we go ..

Continuing from our option #2 from the above, copy the _content.scss file like we did for _base.scss file from the themes dir, and paste it to the <website-root>/asset/scss/.. dir. Modify the font-size: 4.2rem; line in the h1 section under header to your liking. I changed mine to 3.2rem. It reduces the font size by tad.

Live Testing

If you are doing these changes on your local machine (which is how I suggest you do) and not on your server straight up, you can run below commands to see how it looks before publishing to the hosting server.

Windows

  • Navigate to the website root directory.
  • Pull up your Powershell and run hugo.exe server (assuming you are using hugo portable and not an installed version)
  • If you are using installed version of hugo, then it would be just hugo server. There is no exe.
  • It should build your website and it’ll be hosted on https://localhost:1313/

Linux

  • Same as above, except that your command on the terminal would be hugo serve. Double check the missing e in the serve. There is no e on Linux. Yup, that’s how it is on Linux. :)

Resources

  • Internet!