Adding Blog Posts w/ Pagination To Website Page

[eslobrown]

Hello,

I am looking to add at least 4 featured blog posts from a specific tag/category to a website page. I have a module for this but I have two issues:

1. Blog posts 1 and 2 appear horizontally, next to each other. When I increase the number of blog posts from the default of 2 to 4, blog post 3 appears indented under post 1, and blog post 4 appears under post 3. What I’d like to see is blog post 3 appear without the indent under post 1 and post 4 appear directly under post 2.

2. How do I add pagination so that users can see additional posts within that category? I want 4 posts to be featured on that page but want the user to be able to see all available posts.

Below is the my current module code. Any help would be greatly appreciated.

<div class=“overlapping-div-wrapper” style=“background-color: rgba({{ module.overlapping_bg_color.color|convert_rgb }},{{ module.overlapping_bg_color.opacity/100 }});”>
<div class=“container”>
<div>
<h2 class=“overlapping-div-title-white”>
{{ module.heading }}
</h2>
</div>
<div class=“overlapping-div-container”>
{% if module.multiple_tags %}
{% set posts = blog_recent_tag_posts(‘44639786360’, [module.tag_field, module.tag_2], 2) %}
{% else %}
{% set posts = blog_recent_tag_posts(‘44639786360’, [module.tag_field], 3) %}
{% endif %}
{% for post in posts %}
<div class=“span6”>
{% if post.featured_image %}
<div class=“overlapping-div-image-2” style=“background-image:url(‘{{ post.featured_image }}’);”>
</div>
{% else %}
<div class=“overlapping-div-image-2” style=“background-image:url(‘{{ module.generic_image.src }}’);”>
</div>
{% endif %}
<div class=“overlapping-div-text-2”>
<a href=“{{ post.absolute_url }}”><h3>{{ post.name }}</h3></a>
<p style=“margin-bottom: 40px!important;”>{{ post.post_list_content|striptags|truncate(150, breakword=False, end=‘…’) }}</p>
<a class=“related_blogs_cta” href=“{{post.absolute_url}}”>Read More</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>

<style>
.overlapping-div-title-white {
color: #fff;
margin-bottom: 40px;
}
.overlapping-div-wrapper{
padding: 120px 0 180px;
}
.overlapping-div-container {
margin-bottom: -40px;
}
.overlapping-div-image-2 {
background-size: cover;
background-position: center;
height: 300px;
width: 100%;
border: solid 1px #8b92a7;
}
.overlapping-div-text-2{
margin: 20px auto;
}
.overlapping-div-text-2 a:hover, .overlapping-div-text-2 a:active, .overlapping-div-text-2 a:focus{
text-decoration: none!important;
}
.overalapping-div-link {
height: 200px;
width: 100%;
background-color: #00000066;
opacity: 0;
transition: all 200ms linear;
justify-content: center;
display: flex;
align-items: center;
}
.overalapping-div-link a {
padding: 9px 20px;
border: solid 2px #fff;
background-color: none;
color: #fff;
text-transform:uppercase;
transition: all 200ms linear;
opacity: 0;
border-radius: 3px;
}
.overalapping-div-link:hover, .overalapping-div-link:hover a {
opacity:1;
}
.overalapping-div-link:hover a:hover {
background-color: #fff;
color: #ef424a;
opacity: 1;
text-decoration: none;
}
.related_blogs_cta {
background-color: #ef424a;
border: solid 1px #ef424a;
border-radius: 3px;
padding: 9px 20px;
color:#fff;
text-transform: uppercase;
transition: linear all 200ms;
}
.related_blogs_cta:hover,
.related_blogs_cta:focus,
.related_blogs_cta a:hover,
.related_blogs_cta a:focus {
background-color: #fff!important;
color: #ef424a!important;
text-decoration: none!important;
}
@media (max-width: 767px){
.overlapping-div-title {
margin: auto 0 40px;
}
.overlapping-div-container {
margin-bottom: 0;
}
.overlapping-div-wrapper{
padding: 80px 0;
}
.overlapping-div-text-2, .overlapping-div-text-2 h3, .overlapping-div-text-2 h3 a, .overlapping-div-text-2 p {
color: #fff;
}
.overalapping-div-link:hover, .overalapping-div-link:hover a {
opacity:0;
}
.overalapping-div-link:hover a:hover {
width:100%;
height: 200px;
}
.related_blogs_cta {
background-color: #3262e900;
border: solid 1px #fff;
color:#fff;
}
.related_blogs_cta:hover,
.related_blogs_cta:focus,
.related_blogs_cta a:hover,
.related_blogs_cta a:focus {
background-color: #fff!important;
color: #3262e9!important;
}
.overlapping-div-image-2{
margin-top: 60px!important;
}
}
</style>

[dennisedson]

@Anton , any thoughts?

@eslobrown , do you have an example link?

[eslobrown]

Thanks for the reply @dennisedson. Following is a link to the Hubspot preview page: https://tinyurl.com/eb9fkh94

As you can see (on desktop, at least), the third post appears indented under the first post, while the 4th post appears under the 3rd, when it should appear to the right of the third.

I’d settle for just getting the alignment of the four posts right here without the pagination as we can just link to the second page of the blog tag page (https://tinyurl.com/3nvp2jwt), when available.

Thanks again!

[dennisedson]

@eslobrown

In my opinion, the best way to tackle this is by using css’s flex rule.

Here is what I would add (for desktop, you would make changes as you reduce screen size

On the container:

.overlapping-div-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
 }

on the items:

.overlapping-div-container .span6 {
 width: calc(50% - 1rem);
 margin: 0;
 background: #fff;
}

This is how it looks for me with that code:

and style away

[eslobrown]

@dennisedson, really appreciate the reply. Unfortunately, even with your help, this is a bit outside my scope so I’m going to be reaching out to a professional developer for help. Feel free to reach out directly if you have someone you’d recommend.

Thanks again.