# Need advice - related posts in a row

**URL:** <https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674>\
**Category:** Help\
**Created:** [July 4, 2020, 9:00am UTC](https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674 "2020-07-04T09:00:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![soundium](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@soundium](https://talk.jekyllrb.com/u/soundium)\
**Post date:** [July 4, 2020, 9:00am UTC](https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674/1 "2020-07-04T09:00:51Z")

</div>

Hello community,

At this moment I want to implement “Related posts” into the Post page. Almost everything is working well beside related posts don’t want to appear in a row - they appear as a new row. I tried everything that I thought could be a solution. **Does anyone know what should be done to show related posts (2 articles) in one row?**

 ![Screenshot 2020-07-04 at 10.57.00](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/8/8d0a8b993a66cbd9b38a2d3225bf0d631d22ccce.jpeg)

Post.html code:

```
  <div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            {% assign posts = site.posts | where_exp:"post", "post.url != page.url" | sample:2 %}
            {% for post in posts %}
            {% include related.html type="grid" %}
            {% endfor %}  
         </div>
    </div>
  </div>

```

related.html code:

```
<!-- begin post -->
{% assign author = site.authors[post.author] %}

<section class="featured-posts">

    <div class="section-title">
        <h2><span>Related post</span></h2>
    </div>

    <div class="row">
        <div class="col-md-6 mb-30px">
            <div class="listfeaturedtag h-100">
                <div class="row h-100">
                    <div class="col-12 col-md-12 col-lg-5 pr-lg-0">
                        <div class="h-100">
                            <div class="wrapthumbnail">
                                <a href="{{ site.baseurl }}{{ post.url }}">
                                    {% if site.lazyimages == "enabled" %}
                                    <img class="featured-box-img-cover lozad" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                    {% else %}
                                    <img class="featured-box-img-cover" src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                    {% endif %}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12 col-lg-7">
                        <div class="h-100 card-group">
                            <div class="card">
                                <div class="card-body">
                                    <h2 class="card-title">
                                        <a class="text-dark" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
                                        {% if post.rating %}
                                        <div class="mb-2 mt-2 font-weight-normal">
                                        {% include star_rating_postbox.html %}
                                        </div>
                                        {% endif %}
                                    </h2>

                                    <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:15 }}</h4>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end post -->
```

---

<div class="post-metadata">

**Author:** ![vidhyav656](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/vidhyav656/32/1636_2.png) [@vidhyav656](https://talk.jekyllrb.com/u/vidhyav656)\
**Post date:** [July 4, 2020, 9:11am UTC](https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674/2 "2020-07-04T09:11:34Z")

</div>

Post.html code:

```auto
  <div class="container-fluid">
    <div class="row justify-content-center">
        {% assign posts = site.posts | where_exp:"post", "post.url != page.url" | sample:2 %}
        {% for post in posts %}
        {% include related.html type="grid" %}
        {% endfor %}  
    </div>
  </div>

```

You dont need to remove the “col-md-8” class div

---

<div class="post-metadata">

**Author:** ![soundium](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@soundium](https://talk.jekyllrb.com/u/soundium)\
**Post date:** [July 4, 2020, 9:33am UTC](https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674/3 "2020-07-04T09:33:00Z")

</div>

Unfortunately it doesn’t help.  
I want to have it in this way:

 ![need](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/6/62ff3cf9ac10ce4ffd41345b387e47b926c505f2.png)

I removed include and copied the code from related.html into post.html to make it clearer.

**Has someone any idea how to make it work?**

```
<!-- Related post
================================================== -->
{% assign posts = site.posts | where_exp:"post", "post.url != page.url" | sample:2 %}
    
  <div class="clearfix"><br></div>
    <div class="container-fluid">
       <div class="row justify-content-center">
        <div class="col-md-8">
            <div >
                <h2 class="section-title"><span>Related post</span></h2>
            </div>
            
            {% for post in posts %}
             
                <div class="col-md-6 mb-30px">
                    <div class="listfeaturedtag h-100">
                        <div class="row h-100">
                            <div class="col-12 col-md-12 col-lg-5 pr-lg-0">
                                <div class="h-100">
                                    <div class="wrapthumbnail">
                                        <a href="{{ site.baseurl }}{{ post.url }}">
                                            {% if site.lazyimages == "enabled" %}
                                            <img class="featured-box-img-cover lozad" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                            {% else %}
                                            <img class="featured-box-img-cover" src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                            {% endif %}
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12 col-lg-7">
                                <div class="h-100 card-group">
                                    <div class="card">
                                        <div class="card-body">
                                            <h2 class="card-title">
                                                <a class="text-dark" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
                                                {% if post.rating %}
                                                <div class="mb-2 mt-2 font-weight-normal">
                                                {% include star_rating_postbox.html %}
                                                </div>
                                                {% endif %}
                                            </h2>
        
                                            <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:15 }}</h4>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
           
            

            {% endfor %}  
         </div>
    </div>
  </div>

<!-- End Related post
================================================== -->
```

---

<div class="post-metadata">

**Author:** ![vidhyav656](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/vidhyav656/32/1636_2.png) [@vidhyav656](https://talk.jekyllrb.com/u/vidhyav656)\
**Post date:** [July 4, 2020, 9:50am UTC](https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674/4 "2020-07-04T09:50:17Z")

</div>

Any chance, you can share the hosted files link here. It’s would be more of a css issue.

---

<div class="post-metadata">

**Author:** ![soundium](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@soundium](https://talk.jekyllrb.com/u/soundium)\
**Post date:** [July 4, 2020, 9:56am UTC](https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674/5 "2020-07-04T09:56:15Z")

</div>

Sure. The question has been answered. Resolved.

---

<div class="post-metadata">

**Author:** ![vidhyav656](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/vidhyav656/32/1636_2.png) [@vidhyav656](https://talk.jekyllrb.com/u/vidhyav656)\
**Post date:** [July 4, 2020, 10:18am UTC](https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674/6 "2020-07-04T10:18:48Z")

</div>

This should work

```auto
<div class="row">
    {% for post in posts %}
    <div class="col-md-6 mb-30px">
        <div class="listfeaturedtag h-100">
            <div class="row h-100">
                <div class="col-12 col-md-12 col-lg-5 pr-lg-0">
                    <div class="h-100">
                        <div class="wrapthumbnail">
                            <a href="{{ site.baseurl }}{{ post.url }}">
                                {% if site.lazyimages == "enabled" %}
                                <img class="featured-box-img-cover lozad" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if post.image contains " ://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                {% else %}
                                <img class="featured-box-img-cover" src="{% if post.image contains " ://" %}{{ post.image }}{% else %}{{ site.baseurl }}/{{ post.image }}{% endif %}">
                                {% endif %}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-7">
                    <div class="h-100 card-group">
                        <div class="card">
                            <div class="card-body">
                                <h2 class="card-title">
                                    <a class="text-dark" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
                                    {% if post.rating %}
                                    <div class="mb-2 mt-2 font-weight-normal">
                                        {% include star_rating_postbox.html %}
                                    </div>
                                    {% endif %}
                                </h2>
                                <h4 class="card-text">{{ post.excerpt | strip_html | truncatewords:15 }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

```

---

<div class="post-metadata">

**Author:** ![soundium](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@soundium](https://talk.jekyllrb.com/u/soundium)\
**Post date:** [July 4, 2020, 10:35am UTC](https://talk.jekyllrb.com/t/need-advice-related-posts-in-a-row/4674/7 "2020-07-04T10:35:07Z")

</div>

Thank you, it works!