custom module of blog post listing

SOLVE
Winnie
Participant

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/

 

スクリーンショット 2019-12-25 15.24.43.png

 

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

0 Upvotes
1 Accepted solution

Accepted Solutions
krishangtechn
Solution
Member

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

View solution in original post

6 Replies 6
krishangtechn
Solution
Member

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

View solution in original post

Winnie
Participant

Thank you very much for the answer.

It works for the part I want!

0 Upvotes
krishangtechn
Member

@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

0 Upvotes
bschneidewind
Top Contributor | Diamond Partner

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
Participant

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

I will try again, thanks for advice!

 

0 Upvotes
HubBase
Member

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%. 

 

0 Upvotes