CMS Development

Winnie
Teilnehmer/-in

custom module of blog post listing

lösung

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 Akzeptierte Lösung
krishangtechn
Lösung
Mitglied

custom module of blog post listing

lösung

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

Lösung in ursprünglichem Beitrag anzeigen

6 Antworten
HubBase
Teilnehmer/-in | Gold Partner
Teilnehmer/-in | Gold Partner

custom module of blog post listing

lösung

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

custom module of blog post listing

lösung

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
Teilnehmer/-in

custom module of blog post listing

lösung

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

I will try again, thanks for advice!

 

0 Upvotes
krishangtechn
Lösung
Mitglied

custom module of blog post listing

lösung

@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
Teilnehmer/-in

custom module of blog post listing

lösung

Thank you very much for the answer.

It works for the part I want!

0 Upvotes
krishangtechn
Mitglied

custom module of blog post listing

lösung

@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