custom module of blog post listing

[Winnie]

Hi, I am trying to customize the post listing module.

Sorry, I am just know little of css. I would like to place the three posts in a row...but the design part wasn't goes well...

Is anyone know what is the problem of the below code?

Thanks in advance.

Reference link:

https://global-hr.lift-group.co.jp/test/

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

<div class="box_tags">
{% macro blog_post_formatter(blog_post, index, count) %}
<div class="box_items">
<div class="box_img">
{% if blog_post.featured_image %}
<img src="{{ blog_post.featured_image }}" alt="{{ blog_post.featured_image_alt_text|escape }}">
{% endif %}
</div>
<div class="box_details">
<a class="related-blog-title" href="{{blog_post.url}}"><span>{{ blog_post.name }}</span></a><br>
<a href="{{ blog_post.url }}" class="btn-animation-02"><span>続きを読む</span></a><br>
<span class="related-blog-posted-at"> 更新日 </span>
<span class="related-blog-date">{{ blog_post.publishDate|datetimeformat('%Y/%b/%e') }}</span>
</div>
</div>
{% endmacro %}
</div>
{% related_blog_posts select_blog='default', limit=3, tags="トラブル" post_formatter="blog_post_formatter"%}

<div>
<!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-d6e56b67-d750-45e3-99b9-e55ba5068c16"><span class="hs-cta-node hs-cta-d6e56b67-d750-45e3-99b9-e55ba5068c16" id="hs-cta-d6e56b67-d750-45e3-99b9-e55ba5068c16"><!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/5735205/d6e56b67-d750-45e3-99b9-e55ba5068c16" ><img class="hs-cta-img" id="hs-cta-img-d6e56b67-d750-45e3-99b9-e55ba5068c16" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/5735205/d6e56b67-d750-45e3-99b9-e55ba5068c16.png" alt="全てを見る"/></a></span><script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(5735205, 'd6e56b67-d750-45e3-99b9-e55ba5068c16', {}); </script></span><!-- end HubSpot Call-to-Action Code -->

</div>

[krishangtechn · Accepted solution]

@Winnie,

I have checked the below is a solution for the same

There are basically issue with stylesheet which you did apply.

You need to apply below CSS in "GHR_2020ver.min.css" this file with highlighted CSS code.

.box_items {width: 33%; margin: 1rem 0; border: 1px solid #000; display: inline-block;}

.ucBlogSection {width: 33%; display: inline-block;}

.ucBlog1 .ucBlogListingWrapper .ucPostListing .ucPostItem {

 width: 100%;

display: inline-block;

vertical-align: top;

padding: 0 8px;

margin-right: -4px;

min-height: auto;

margin-bottom: 50px;

}

If you like the solution then kindly mark as a solution. Also upvote.

If you need further help feel free to reach out we are glad to help you

Thanks

Ramesh

Krishang Technolab

[Winnie]

Thank you very much for the answer.

It works for the part I want!

[krishangtechn]

@Winnie ,

Great to hear that. thanks for mark as solution. Also if you need further solution let us know. Your upvote will be appreciated

Thanks

Ramesh

Krishang Technolab

[bschneidewind]

You shouldn't have to write any new CSS for this, it's already setup earlier on the page... 

The correct sturcture is defined earlier in the page:

<div class="ucBlogListingWrapper cell-wrapper">
    <div class="ucPostListing">
      
      <div class="ucPostItem"></div> 
      <div class="ucPostItem"></div> 
      <div class="ucPostItem"></div> 
      
    </div>
  </div>

 the ucBlogListingWrapper and ucPostListing classes should be wrapping all three ucPostItems (rather than wrapping each of them, as it is where the layout issue is occurring).

[Winnie]

This is the new css sheet I added after I ask.

I will try again, thanks for advice!

[HubBase]

Hi Winnie,

I would suggest you use CSS flex and featured image as a background image, not an HTML image.

Below you can find the code that will make your module more readable and perfectly align.

.ucBlog1 .ucPostListing {
    display: flex;
    flex-wrap: wrap;

}

.ucBlog1 .ucBlogListingWrapper .ucPostListing .ucPostItem:first-child {
   margin-left: 0;

}

.ucBlog1 .ucBlogListingWrapper .ucPostListing .ucPostItem{

      width: 32.28931623931625%;
      margin: 0 0 50px 1.564102564102564%;

}

Using flex CSS will help you to render cards in the same size no matter it has enough content or not. And spacing will be the same as the above section.

P.S for the mobile you will need to define media queries and change the width property to 100%.