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?