Blog Post Listing Fix

Develop, Build & Integrate CMS Development
1

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 }}\ \ |\ \ 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.

2

Hey @bstock98

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

Thank you

Sharon

3

Sharon,

Yes I would appreciate any help you can give.

Thank you,

Ben S.

4

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 @ajchapman20 could you please share your thoughts with @bstock98 ?

Thank you & Stay Safe

Sharon

5

Thank you @sharonlicari and @alyssamwilie !

That worked like a charm. I appreciate your help.

6

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 -

.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;
}
7

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 suit. I see you already positioned display