CMS Development

Winnie
Participant

custom module of blog post listing

SOLVE

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
krishangtechn
Solution
Member

custom module of blog post listing

SOLVE

@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
HubBase
Participant | Gold Partner
Participant | Gold Partner

custom module of blog post listing

SOLVE

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
Anonymous
Not applicable

custom module of blog post listing

SOLVE

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

custom module of blog post listing

SOLVE

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

I will try again, thanks for advice!

 

0 Upvotes
krishangtechn
Solution
Member

custom module of blog post listing

SOLVE

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

custom module of blog post listing

SOLVE

Thank you very much for the answer.

It works for the part I want!

0 Upvotes
krishangtechn
Member

custom module of blog post listing

SOLVE

@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