theme: avoid too much whitespace between menu and content

[kadavil]

I was wondering if there is a way to reduce the white space between the Menu window and the Page content. On a full screen, the white space seems too much compared to how it behaved in the learn theme. I am trying to port our doc site from learn theme to relearn theme and noticing these subtle spacing issues.

Is there a setting to define the spacing?

Relearn theme

Learn theme

Thanks

[McShelby]

At a certain resolution (read: screen width), the theme locks the width of its content to avoid getting text lines to long. https://baymard.com/blog/line-length-readability

Nevertheless you can change this by defining your own CSS in custom-header.html

Rule from theme.css:

/* we limit width if we have large screens */
@media screen and ( min-width: 1300px ){ /* #sidebar/width + ./max-width */
    #body .flex-block-wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: 1000px;
    }
}

Please remember, that this is not a documented feature and therefore overwriting the rule may break in any newer version of the theme.

[rcastley]

Hi @McShelby (great template BTW, thank you).

I have attempted to do this with the very latest version but the suggestion above doesn't work. Would you be so kind to provide a tip to widen the content in the latest version of theme please?

Many thanks :-)

EDIT:

Sorted it :-)

    /* we limit width if we have large screens */
    @media screen and (min-width: 1300px) {

        /* #sidebar/width + ./max-width */
        #body .flex-block-wrapper {
            margin-left: auto;
            margin-right: auto;
            max-width: 1300px;
            width: 100%;
        }
    }

[AdamFermier]

Hi @McShelby and @rcastley - thanks for the post - great work - I'm stumped though - I've tried to implement by:

1. Copy the custm-header.html from theme and placing it into the layouts/partials/custom-header.html
2. snippet of code from above how I interpretted:

`<!-- Partial intended to be overwritten to add custom headers, like CSS or any other info

<style> /* Custom css */ /* we limit width if we have large screens @media screen and (min-width: 1300px) { /* #sidebar/width + ./max-width */ #body .flex-block-wrapper { margin-left: auto; margin-right: auto; max-width: 1300px; width: 100%; } } } } </style>

-->`

Any advice? Thanks Adam

[rcastley]

Looks like you have surround yours with commenting out tags <!— and —>

[AdamFermier]

Hi @rcastley thanks so much - that worked! You all are way to kind - love the theme - simple to learn and clean/crisp.

[skiboyjcmu]

Having this same issue. Added custom-header, AFAIK in the right place with the correct synax, and still my site is very narrow

https://github.com/FortinetCloudCSE/DemoFrontEndDocker/blob/main/layouts/partials/custom-header.html

hugo v0.111.3+extended darwin/arm64 BuildDate=unknown

what am i missing?

reLearn theme on top, older Learn theme on bottom

[rcastley]

@skiboyjcmu You are configuring your pages using Chapters e.g.

---
title: "Fortinet Standard Workshop Web format - MVP1"
chapter: true
weight: 1
---

Simply setting chapter: false you get the full width content :-)

[skiboyjcmu]

bingo bango! Works like a charm now. Thx so much!

[rcastley]

@McShelby Good Evening ... just taking 6.0.0 for a spin and it looks like it might not honor the above CSS trick to widen the pages. I ensured I cleared cache/used incognito mode etc. but I can't get this to work in 6.0.0. As soon as I back out 6.0.0 I go back to being the width defined.

I have attempted to inspect the source and apply some CSS tweaks myself but to no avail :-( Are you able to provide any pointers? Also, would this be worth having as a configuration option?

Many thanks,

• Robert

[McShelby]

Hi Robert, thanks for the feedback.

The way described above was always hacky. Since 5.26.0, the theme has a documented way to achieve this:

https://mcshelby.github.io/hugo-theme-relearn/basics/customization/index.html#change-the-main-areas-max-width

[rcastley]

That’s awesome … thank you for replying

Cheers
Robert