Increasing max-width on blog posts

Using Themes
1

Hey All,

Trying to increase the max-width on my posts with the LoveIt theme. According to the docs you can put custom style here in /assets/css/_custom.scss.

I tried doing just that

.container {
margin: 0 auto;
max-width: 5000px;
}

Probably won’t want 5000px but I’m just trying to test it.

I also tried doing the same in .content in the LoveIt/assets/css/_page/_single.scss file but it’s not working.

$ hugo version
hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended linux/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=snap:0.111.3

EDIT:

Ok, I verified the _custom.scss file is working by increasing the h2 header font size and realized my structure wasn’t right, but still the max-width is not working.

.single {
    .content {

        >h2 {
            font-size: 1.5rem;

            & code {
                font-size: 1.25rem;
            }
        }

        text-align: left;
        max-width: none;
    }
}
2

The theme seems to set different widths based on the screen width, what is usually called “breakpoints”. Try the following and see this file for reference: _media.scss

.page {
    width: 100% !important;
}
3

This is a CSS issue, nothing to do with Hugo. Your best chance is to have a look at your HTML document in a browser’s developer tools and see which CSS rules are in effect and influence the width.

2 Likes
4

EDIT: Ok, with the help of ChatGPT and your post, I found it. I removed everything from /assets/css/_custom.scss and put this in

.page {
    max-width: 1200px;
    /* adjust as needed */
    margin: 0 auto;
}

Ah, yeah I tried messing around with that file too.

So I just tried

.page {
        width: 100% !important;
}

And this

@media only screen and (max-width: 1440px) {
    .page {
        width: 100% !important;
    }
}

In the /assets/css/_custom.scss file. I’m running 1440p. And neither seemed to work

5

You’re right, this isn’t the place for this question. I did try looking in dev tools for a max-width attribute but don’t see it in the section that highlights the article -

<div class=content id="content">..</div> == $0

I do see this in the right hand column tho of devtools, not sure if its related

body {

  1. background-color: #fff;
  2. color: #161209;
  3. word-wrap: break-word;
  4. overflow-wrap: break-word;
6

Don’t use absolute length values line px. That’s, as you already found out, useless given the vast range of screen sizes today. Instead, use relative sizes like vw, em etc for width and height parameters.

1 Like
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.