I am new to using jekyll and I faced a weird problem for a while that I can’t figure out.
so I have a moviesingle.html like this.
<div class="grid__item2">
<div class="card">
<div class="card_left">
<img src="{{ movie.poster }}" alt="{{ movie.title }}" />
</div>
<div class="card_right">
<h1>{{ movie.title }}</h1>
<div class="card_right__details">
<ul>
<li>{{ movie.year }}</li>
<li>{{ movie.director }}</li>
<li>{{movie.rating}} / 10</li>
</ul>
<div class="card_right__review">
<p>{{ movie.description }}</p>
<a href="{{movie.link}}" target='_blank'>Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and I also have a movielist.html like this
{% for movie in site.movies %} {% include moviesingle.html %} {% endfor %}
and I have a movies.html like this
---
layout: default
title: "Movies"
permalink: /movies/
author_profile: true
---
<div id="wrapper">{% include movielist.html %}</div>
Here’s my problem I expect that all my moviesingle.html created be inside the div with id="wrapper" but only the first two elements are included and the rest are outside the . this is the end result:
<div id="wrapper">
<div class="grid__item2">
<div class="card">
<div class="card_left">
<img src="..." alt="...">
</div>
<div class="card_right">
<h1>...</h1>
<div class="card_right__details">
<ul>
<li>...</li>
<li>...</li>
<li>... / 10</li>
</ul>
<div class="card_right__review">
<p></p>
<a href="..." target="_blank">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item2">
<div class="card">
<div class="card_left">
<img src="..." alt="...">
</div>
<div class="card_right">
<h1>Arcane Season 1</h1>
<div class="card_right__details">
<ul>
<li>...</li>
<li>...</li>
<li>... / 10</li>
</ul>
<div class="card_right__review">
<p></p>
<a href=...">Read more</a>
</div>
</div>
</div>
</div>
</div>
If I don’t loop through contents (like putting empty s) this does not happen. if I put any other elements in the wrapper still only first two iterations of the loop are contained there. I would really appreciate if anyone knows what’s going on
2
Answers
change moviesingle like this:
You had two too much at the end
looks good.
Yet, in moviesingle.html you close two additional divs. If you write your code in a structured manner, like this:
then it will be immediately clear once you look at the code.