CMS Development

Winnie
Participant

related blog post's styling is not working

I have published the following module since Jan, this year, and it does work for a while until yesterday. I checked and I think it doesn't macro the things I wrote. Could anyone can help? (My level is just know little html & css and new for hubl.)

 

Thanks in advance.

 

The preview of design manager is that I created.

スクリーンショット 2020-05-26 11.02.39.png

However, the view of I published is: (https://global-hr.lift-group.co.jp/test)

FireShot Capture 004 -  - global-hr.lift-group.co.jp.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">
  <a class="related-blog-title" href="{{blog_post.url}}">
{% macro blog_post_formatter(blog_post, index, count) %}
    <a class="related-blog-title" href="{{ blog_post.url }}">
      <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 }}">{{ blog_post.name }}</a><br>
        </div>
        </div>
    </a>
{% endmacro %}
    </a>
</div>
{% related_blog_posts select_blog='default', limit=3, tags="外国人雇用のノウハウ", post_formatter="blog_post_formatter" %}

  <div class="cta-center">
    <!--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>  

And this is the css:

 

.box_tags {
    display: flex;
    width: 100%;
    background-color: #ff6e4e;
    margin-top: 2rem;
}
.box_items {
  width: 33%; 
  display: inline-block;
  vertical-align: top;
  margin-bottom: 50px;
  transform: translate3d(0, 0, 0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 0 3px rgba(0,0,0,0.12);
  transition: transform 0.2s ease,box-shadow 0.2s;
}
.box_items:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 35px rgba(0,0,0,0.15), 0 0 15px rgba(0,0,0,0.12);
}
.box_img {
  padding: 0;
  height: 250px;
  max-height: 250px;
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;
}
.box_details {
   margin: 0 .7rem 1rem;
   padding: 1rem 1rem;
   font-weight: 800;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: #39464e;
}

.related-blog-title a {
  padding: 1rem 1rem;
  color: {{ linkColor }};
  font-size: 20px;
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.related-blog-title a:hover {
  padding: 1rem 1rem;
  font-size: 18px;
  font-weight: 800;
  color: {{ linkHover }};
}
.related-blog-title a:after {
  display: block;
  width: 0;
  height: 2px;
  content: "";
  background: {{ linkHover }};
  -webkit-transition: width 0.5s ease;
  -moz-transition: width 0.5s ease;
  -ms-transition: width 0.5s ease;
  -o-transition: width 0.5s ease;
  transition: width 0.5s ease;
}

.box_details a {
  color: {{ linkColor }};
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.box_details a:hover {
  color: {{ linkHover }};
}

.box_details1 p {
  font-size: 16px;
  font-weight: 400;
  color: #39464e;
  padding: 1rem 1rem;
}
.cta-center {
  text-align: center;
  margin: 2rem 0;
}

/*-------------- モバイル ------------------*/
@media screen and (max-width: 979px) {

}
@media screen and (max-width: 767px) {
  .box_tags {
    flex-direction: column;
  }
  .box_items {
    width: 100%;
    display: block;
  }
}
@media screen and (max-width: 480px) {

}

 

 

0 Upvotes
1 Reply 1
FabianRichter
Contributor

related blog post's styling is not working

I think your issue is caused by the additional added JavaScript-Tag, that also occurs on my website. I also requested in this forum to fix this bug: https://community.hubspot.com/t5/CMS-Development/Related-Blog-Posts-macro-inserts-script-tag/m-p/341....

Looking forward to get an answer soon.