Hugo’s PaperMod theme uses text that is too large on smartphones by default, so I adjust it with custom CSS.

Reference: Bundling Custom css with theme’s assets | FAQs · adityatelange/hugo-PaperMod Wiki

Environment

  • Windows 11 / Git Bash
  • Hugo v0.164.0 (this method also works with the standard build)
  • PaperMod v8.0 (pulled in through the latest commit at the time)
$ hugo version
hugo v0.164.0-ce2470e7012b5ab5fc4e10ebe4027e9f8d9e00dc+extended windows/amd64 BuildDate=2026-07-06T16:39:30Z VendorInfo=gohugoio

$ cd themes/PaperMod && git log -1 --oneline
154d006 (HEAD -> master, origin/master, origin/HEAD) style(post-single): adjust padding for details summary element

Setup Steps

1. Create the custom CSS

Create assets/css/extended/custom.css.

Or run the following from the project root directory.

mkdir -p assets/css/extended && touch assets/css/extended/custom.css

2. Paste the CSS

Copy and paste the following code into the custom.css you created.

I add !important as needed to override the theme’s selector specificity.

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.7;
    }

    .post-title,
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.35;
    }

    h2 {
        font-size: 1.3rem !important;
        line-height: 1.4;
    }

    h3 {
        font-size: 1.15rem !important;
        line-height: 1.45;
    }

    .post-content {
        font-size: 1rem !important;
        line-height: 1.75;
    }

    .first-entry .entry-header h1 {
        font-size: 1.45rem;
        line-height: 1.4;
    }

    .first-entry .entry-header h2,
    .entry-header h2 {
        font-size: 1.2rem;
        line-height: 1.45;
    }

    .entry-content,
    .entry-footer,
    .post-meta,
    .breadcrumbs,
    .paginav span {
        font-size: 0.9rem;
    }

    .paginav .title,
    .post-tags a {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 400px) {

    .post-title,
    h1 {
        font-size: 1.35rem !important;
    }

    h2 {
        font-size: 1.2rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }
}

3. Save and start the development server to check

Run hugo server to start the development server and check the result. From there, adjust the styles however you like.