Wrong formatting of page content on custom home page

Themes
1

I run into a similar issue like described here: CSS didn't apply to custom home page on Casper

  1. I am using the Digest template
  2. I followed the guidelines under the “Rendering Ghost content” section in the Tutorials tutorial (scroll about half way down)
  3. I created a page with the slug “home” and I see the content is being added to my home page after modifying the routes.yaml and home.hbs files

yaml:

routes:

  /:
    data: page.home
    template: home

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

home.hbs:

{{!< default}}

<main id="gh-main" class="gh-main">
    {{#page}}
        <div>
            {{content}}
        </div>
    {{/page}}
    {{#get "posts" limit="1"}}
        {{#foreach posts}}
            <article class="gh-article {{post_class}}">
                {{> content}}
            </article>
        {{/foreach}}
    {{/get}}
</main>

The rendered result contains the correct text font and text formatting. However, the text box is stretched across the entire width of the page, no image is shown, no margins and spaces are rendered (no spaces between text sections, separators, etc.).

Any thoughts and advices are appreciated. The author should maybe update that tutorial. Thanks!

2

Support helped me out, so I can provide their solution in case others need it too.

The div element in home.hbs doesn’t have any CSS styling applied. Applying the class of “gh-content gh-canvas” fixed my issue. This is the code:

{{!< default}}

<main id="gh-main" class="gh-main">
    {{#page}}
        <div class="gh-content gh-canvas">
            <h2>{{title}}</h2>
            {{content}}
        </div>
    {{/page}}
    {{#get "posts" limit="1"}}
        {{#foreach posts}}
            <article class="gh-article {{post_class}}">
                {{> content}}
            </article>
        {{/foreach}}
    {{/get}}
</main>