CMS Development

Winnie
Participante

custom module of blog post listing

resolver

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 Avaliação positiva
1 Solução aceita
krishangtechn
Solução
Membro

custom module of blog post listing

resolver

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

Exibir solução no post original

6 Respostas 6
HubBase
Participante | Parceiro Ouro
Participante | Parceiro Ouro

custom module of blog post listing

resolver

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 Avaliação positiva
Anonymous
Não aplicável

custom module of blog post listing

resolver

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
Participante

custom module of blog post listing

resolver

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

I will try again, thanks for advice!

 

0 Avaliação positiva
krishangtechn
Solução
Membro

custom module of blog post listing

resolver

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

custom module of blog post listing

resolver

Thank you very much for the answer.

It works for the part I want!

0 Avaliação positiva
krishangtechn
Membro

custom module of blog post listing

resolver

@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 Avaliação positiva