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.
- Create a
custom.cssfile and include it in the
- Even better, just copy the
_base.scssfile to the root of your dir and update it to your liking.
- Create a file and name it
- Copy below lines and add them to it.
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;
- As you can see, the default value is
max-width: 90rem;, and we are updating it to
- The number is just an estimate at this point, and you can always come back and change it later. :)
- Update the
custom.scssfile to the
customSCSStag, 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.cssfile and adding that to the
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.
_base.scssfile 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
.containersection as we discussed above. Just edit the
90remto whatever you feel is appropriate. I choose
- 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!
- Just an FYI, you would need
Hugo_extendedversion 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.
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.
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.
- 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
- Same as above, except that your command on the terminal would be
hugo serve. Double check the missing
ein the serve. There is no
eon Linux. Yup, that’s how it is on Linux. :)