Blog Post Listing Fix

[bstock98]

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.

[SSherph3]

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

[alyssamwilie · Accepted solution]

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

[sharonlicari]

Hey @bstock98 

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

Thank you

Sharon 

[bstock98]

Sharon,

Yes I would appreciate any help you can give.

Thank you,

Ben S.

[sharonlicari]

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

[bstock98]

Thank you @sharonlicari and @alyssamwilie !

That worked like a charm. I appreciate your help.