Is there a way to change the width page of a html post in blogdown/hugo?

Question

I'm building a post using blogdown with the theme hugo-tranquilpeak-theme . Is there a way which I can change the width of the rendered page?

I have an example here:

It seems me too narrow. Could I do it larger?

I wish I could set it as a default behavior for all posts of the blog.

Answer 1

The width is determined by your theme. I only looked at an example site provided here but in this particular case, the element you need to deal with appears to be main-content-wrap . I came to this conclusion by right clicking on my browser and picking "Inspect Element" (firefox) or "Inspect" (chrome) which gives you information about which elements are present and how are they effected by existing CSS. From here you can see that it has a default max-width of 750px. You need to create a CSS file to overwrite this property. The file only has to contain

.main-content-wrap{
    max-width: [insertYourDesiredWidthHere]px
}

Save this file somewhere under your static directory. Ideally in a folder called css for convention's sake

The way to actually get this file in use is also theme dependent. Typically this is controlled by the customCSS parameter in the config.toml

Looking at the example site at the theme repository I can see commented out lines that are describing how to do this.

So just add

[[params.customCSS]]
 href = "pathToFileUnderStatic"

Answer 2

That's what worked for me:

Find the.css that your theme is using ( themes/hugo-lithium/static/css/main.css ) and edit the .content bellow, changing the max-width property:

.content {
  max-width: 700px;
  margin: 40px auto 10px;
  padding: 0 15px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

Source: https://bookdown.org/yihui/blogdown/css.html