# Blog Post Listing Fix

**URL:** <https://community.hubspot.com/t/blog-post-listing-fix/20055>\
**Category:** CMS Development\
**Tags:** content\
**Created:** [April 15, 2020, 12:33am UTC](https://community.hubspot.com/t/blog-post-listing-fix/20055 "2020-04-15T00:33:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bstock98](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bstock98/32/71597_2.png) [@bstock98](https://community.hubspot.com/u/bstock98)\
**Post date:** [April 15, 2020, 12:33am UTC](https://community.hubspot.com/t/blog-post-listing-fix/20055/1 "2020-04-15T00:33:22Z")

</div>

Hey Everyone,

I have a blog post listing module that I am trying to change the display with. Currently it is trying to display each listing in a collumn within one row. I’d rather it display each listing in a row of its own, but I cannot seem to figure out how to do this.

Below are the HTML and CSS for the module. If you are able to show me which sections need altering in order to make this change, I would greatly appreciate it.

HTML:

**{% set blog\_selector = blog\_by\_id(module.select\_blog) %}**

**{% if module.filter == ‘id\_only’ %}**

**{% set blogPosts = blog\_recent\_posts(module.blog\_id, 3) %}**

**{% else %}**

**{% set blogPosts = blog\_recent\_tag\_posts(module.blog\_id, module.tag, 3) %}**

**{% endif %}**

**\<div class=“news-listing”\>**

**\<div class=“news-listing\_\_header”\>**

**{% icon**

**extra\_classes=‘news-listing\_\_header-icon’,**

**name=‘newspaper’,**

**purpose=‘decorative’,**

**style=‘SOLID’,**

**%}**

**\<h3\>{{ module.title\_text }}\</h3\>**

**\<a href=“{{ blog\_selector.absolute\_url }}”\>{{ module.button\_text }}\</a\>**

**\</div\>**

**\<div class=“news-listing\_\_body”\>**

**{% for post in blogPosts %}**

**\<div class=“news-listing\_\_entry”\>**

**\<div class=“news-listing\_\_entry-row”\>**

**{% icon**

**name=‘calendar’,**

**purpose=‘decorative’,**

**extra\_classes=‘news-listing\_\_entry-icon’**

**%}**

**\<h6 class=“news-listing\_\_entry-date”\>**

**{{ post.publish\_date\_localized }}**

**\</h6\>**

**\</div\>**

**\<h4\>{{ post.title }}\</h4\>**

**\<div class=“news-listing\_\_entry-row news-listing\_\_entry-row–author”\>**

**{{ post.author\_name }}\&nbsp;\&nbsp;|\&nbsp;\&nbsp;Author**

**\</div\>**

**\<div class=“news-listing\_\_entry-summary”\>**

**{{ post.post\_list\_content|safe|truncatehtml(300, ‘…’, false) }}**

**\</div\>**

**\<a href=“{{ post.absolute\_url }}”\>Read more\</a\>**

**\</div\>**

**{% endfor %}**

**\</div\>**

**\</div\>**

CSS:

**.news-listing {**  
**background-color: #FFF;**  
**border: 1px solid #CCC;**  
**}**

**.news-listing\_\_header {**  
**-webkit-box-align: center;**  
**-ms-flex-align: center;**  
**align-items: center;**  
**border-bottom: 1px solid #CCC;**  
**display: -webkit-box;**  
**display: -ms-flexbox;**  
**display: flex;**  
**padding: 2rem;**  
**}**

**.news-listing\_\_header h3 {**  
**margin: 0;**  
**}**

**.news-listing\_\_header-icon \> svg {**  
**fill: #ff8210;**  
**margin-right: 0.5rem;**  
**width: 2rem;**  
**}**

**.news-listing\_\_header a {**  
**margin-left: auto;**  
**}**

**.news-listing\_\_body {**  
**display: -webkit-box;**  
**display: -ms-flexbox;**  
**display: flex;**  
**padding: 2rem;**  
**}**

**.news-listing\_\_entry {**  
**display: -webkit-box;**  
**display: -ms-flexbox;**  
**display: flex;**  
**-webkit-box-orient: vertical;**  
**-webkit-box-direction: normal;**  
**-ms-flex-direction: column;**  
**flex-direction: column;**  
**margin: 1rem 0;**  
**width: 100%;**  
**}**

**.news-listing\_\_entry-row {**  
**display: -webkit-box;**  
**display: -ms-flexbox;**  
**display: flex;**  
**-webkit-box-orient: horizontal;**  
**-webkit-box-direction: normal;**  
**-ms-flex-direction: row;**  
**flex-direction: row;**  
**}**

**.news-listing\_\_entry-icon \> svg {**  
**width: 1rem;**  
**margin-right: 0.5rem;**  
**}**

Thank you for all your help,

Ben S.

---

<div class="post-metadata">

**Author:** ![sharonlicari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sharonlicari/32/101479_2.png) [@sharonlicari](https://community.hubspot.com/u/sharonlicari)\
**Post date:** [April 23, 2020, 9:13am UTC](https://community.hubspot.com/t/blog-post-listing-fix/20055/2 "2020-04-23T09:13:53Z")

</div>

Hey @bstock98

Apologies for the delayed answer. Do you still need help with this matter?

Thank you

Sharon

---

<div class="post-metadata">

**Author:** ![bstock98](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bstock98/32/71597_2.png) [@bstock98](https://community.hubspot.com/u/bstock98)\
**Post date:** [April 23, 2020, 2:10pm UTC](https://community.hubspot.com/t/blog-post-listing-fix/20055/3 "2020-04-23T14:10:24Z")

</div>

Sharon,

Yes I would appreciate any help you can give.

Thank you,

Ben S.

---

<div class="post-metadata">

**Author:** ![sharonlicari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sharonlicari/32/101479_2.png) [@sharonlicari](https://community.hubspot.com/u/sharonlicari)\
**Post date:** [April 23, 2020, 3:06pm UTC](https://community.hubspot.com/t/blog-post-listing-fix/20055/4 "2020-04-23T15:06:09Z")

</div>

Hey @bstock98

Thank you for your prompt response!

I’ll tag a few of our experts that can help you with this.

Hey @alyssamwilie [@david\_eic](https://community.hubspot.com/t5/user/viewprofilepage/user-id/67318) @ajchapman20 could you please share your thoughts with @bstock98 ?

Thank you & Stay Safe

Sharon

---

<div class="post-metadata">

**Author:** ![bstock98](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bstock98/32/71597_2.png) [@bstock98](https://community.hubspot.com/u/bstock98)\
**Post date:** [April 23, 2020, 3:39pm UTC](https://community.hubspot.com/t/blog-post-listing-fix/20055/5 "2020-04-23T15:39:54Z")

</div>

Thank you @sharonlicari and @alyssamwilie !

That worked like a charm. I appreciate your help.

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 23, 2020, 3:13pm UTC](https://community.hubspot.com/t/blog-post-listing-fix/20055/6 "2020-04-23T15:13:05Z")

</div>

Hi @bstock98  
If you want each post to show on it’s own row you’ll want to remove the display: flex from your news-listing\_\_body -

```auto
.news-listing {
background-color: #FFF;
border: 1px solid #CCC;
}

.news-listing__header {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #CCC;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 2rem;
}

.news-listing__header h3 {
margin: 0;
}

.news-listing__header-icon > svg {
fill: #ff8210;
margin-right: 0.5rem;
width: 2rem;
}

.news-listing__header a {
margin-left: auto;
}

.news-listing__body {
padding: 2rem;
}

.news-listing__entry {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 1rem 0;
width: 100%;
}

.news-listing__entry-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}

.news-listing__entry-icon > svg {
width: 1rem;
margin-right: 0.5rem;
}

```

---

<div class="post-metadata">

**Author:** ![SSherph3](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ssherph3/32/98997_2.png) [@SSherph3](https://community.hubspot.com/u/SSherph3)\
**Post date:** [April 4, 2021, 12:29am UTC](https://community.hubspot.com/t/blog-post-listing-fix/20055/7 "2021-04-04T00:29:28Z")

</div>

I assume the fastest, easiest option would be to build a international custom repeater module with a view to permit you to upload and get rid of classes as you [see](https://vloggingsetup.com/best-point-and-shoot-camera-under-400/) suit. I see you already positioned display