Inconsistent post formatting on index page

Hosting on Micro.blog
1

I’ve come across a nagging issue in developing my theme that I’m hoping someone with more chops than me can help out with. The index page is setup to use a div container to which spacing is applied. However, only the most recent post is rendered inside the container, resulting in the rest of the articles on the page overflowing the margins and causing horizontal scrolling on the page. Here are the two code blocks in question:

layouts/index.html

{{ partial "head.html" . }}
<body>
<div id="container">
    {{ partial "header.html" . }}
    <section id="main" class="outer">
        {{ $paginator := .Paginate (where .Pages "Type" "post") }}
        {{ range $paginator.Pages }}
		{{ partial "li.html" . }}
        {{ end }}

        {{ partial "pagination.html" . }}
    </section>
    {{ partial "footer.html" . }}
</div>
    {{ partial "custom_footer.html" . }}
		{{ range .Site.Params.plugins_js }}
			<script src="{{ . }}"></script>
		{{ end }}
</body>
</html>

layouts/partials/li.html

<article class="archive-article archive-type-post">
    <div class="archive-article-inner">
        <header class="archive-article-header">
            <h1 itemprop="name">
                <a class="archive-article-title" href="{{ .RelPermalink }}">{{ .Title }}</a>
            </h1>
{{ if .Title }}
		<div class="p-summary">
			<p>{{ .Summary }}</p>
			{{ if .Truncated }}
				<p><a href="{{ .Permalink }}">Continue reading →</a></p>
			{{ end }}
		</div>
{{ else }}
<div class="article-entry" itemprop="articleBody">
                    <p>
                    {{ .Content }}
                    </p>
{{ end }}
 </header>
<a href="{{ .RelPermalink }}" class="archive-article-date">
                <time datetime='{{ .Date.Format "2006-01-02T15:04:05.000-07:00" }}' itemprop="datePublished">{{ .Date.Format "2006-01-02" }}</time>
            </a>
       
    </div>
</article>

Any ideas where I’ve gone wrong and how to fix?

2

A likely culprit when this kind of thing happens is unbalanced HTML tags. Like when you open a <div> element without ever closing it with </div>. I don’t know if that’s what happening here; I’ve just glanced over your templates. :blush: But this section sticks out to me as a place where unbalanced tags could manifest:

{{ if .Title }}
		<div class="p-summary">
			<p>{{ .Summary }}</p>
			{{ if .Truncated }}
				<p><a href="{{ .Permalink }}">Continue reading →</a></p>
			{{ end }}
		</div>
{{ else }}
<div class="article-entry" itemprop="articleBody">
                    <p>
                    {{ .Content }}
                    </p>
{{ end }}

Inside the else-clause, a <div>-tag (with the class article-entry) is opened without being closed. That may be what causes you trouble.

3

Wow, don’t know how I missed that. Unfortunately that didn’t solve it so I’m going to take another look at my CSS as I’ve made some changes to that in trying to solve this problem. It’s likely I’ve now brought that out of whack from this correction potentially fixing the issue. Thanks for your help though! :pray:

4

You’re welcome! If you have a public test blog available and want an extra pair of eyes on it, I’m happy to help troubleshoot the problem.

5

I may take you up on that generous offer if I can’t figure this out. I’m trying to grok it on my own so I can keep learning for future themes, but I’ll let you know!

2 Likes
6

Please add me to the list of people you will show this to. If it’s on github, I’m on there as mandaris.