code-injection Inline number counter

Site URL: https://bugle-fish-cafk.squarespace.com/

Hi there

i implemented the number counter from squarestud. Now I would like to have all 5 numbers in a row.
I've tried a lot, but unfortunately I can't get any further. Can someone help me?

Header Injection:

<style>
.counter-container {
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
}
#counterbox {
  display: inline-block;
  min-width:200px;
}
#counterbox p {
  font-size:30px;
  text-align: center;
  width: 100%;
  display: block;
  color: rgb(163,79,139)
}
.counter {
  font-size:100px;
  line-height: 60px;
  font-weight: 200;
  color: rgb(163,79,139);
}
@media (max-width:870px) {
  .counter-container {
    display: none !important;
    width: 100% !important;
  }
   .counter-countainer #counterbox {
      margin-top: 20px;
      margin-bottom: 20px;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
/*=============== SQUARE STUDIO ANIMATED COUNTER PLUGIN START ===============*/
function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver,new MutationObserver(function(a){for(var b=0;b<a.length;b++){if("attributes"===a[b].type){var d=new Event("pageChange");document.dispatchEvent(d)}}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var executed=!1;$(document).ready(function(){function a(){$(".counter-container").length>0&&$(window).scroll(function(){b()})}function b(){if(!executed){var a=.1*$(".counter-container").outerHeight();$(window).scrollTop()>$(".counter-container").offset().top-$(window).height()+a&&(executed=!0,$(".counter").each(function(){var a=$(this),b=a.attr("data-count");$({countNum:a.text()}).animate({countNum:b},{duration:3e3,easing:"linear",step:function(){a.text(Math.floor(this.countNum))},complete:function(){a.text(this.countNum)}})}))}}a()}),document.addEventListener("pageChange",function(){executed=!1,$(window).unbind("scroll"),init()}),window.onload=watch;
/*================ SQUARE STUDIO ANIMATED COUNTER PLUGIN END ================*/
</script>

Code Widget:

<div class="counter-container">
  <div id="counterbox">
  <div class="counter one" data-count="13">0</div><p>FIRMENANLÄSSE</p>
</div>
<div id="counterbox">
  <div class="counter two" data-count="33">0</div>     <p>HOCHZEITEN</p>
</div>
<div id="counterbox">
  <div class="counter three" data-count="3">0</div>     <p>MESSEN</p>
  <div id="counterbox">
  <div class="counter three" data-count="8">0</div>     <p>KONZERTE</p>
    <div id="counterbox">
  <div class="counter three" data-count="17">0</div>     <p>PRIVATANLÄSSE</p>
</div>
</div>

5 hours ago, cade said:

Site URL: https://bugle-fish-cafk.squarespace.com/

Hi there

i implemented the number counter from squarestud. Now I would like to have all 5 numbers in a row.
I've tried a lot, but unfortunately I can't get any further. Can someone help me?

 

Header Injection:

<style>
.counter-container {
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
}
#counterbox {
  display: inline-block;
  min-width:200px;
}
#counterbox p {
  font-size:30px;
  text-align: center;
  width: 100%;
  display: block;
  color: rgb(163,79,139)
}
.counter {
  font-size:100px;
  line-height: 60px;
  font-weight: 200;
  color: rgb(163,79,139);
}
@media (max-width:870px) {
  .counter-container {
    display: none !important;
    width: 100% !important;
  }
   .counter-countainer #counterbox {
      margin-top: 20px;
      margin-bottom: 20px;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
/*=============== SQUARE STUDIO ANIMATED COUNTER PLUGIN START ===============*/
function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver,new MutationObserver(function(a){for(var b=0;b<a.length;b++){if("attributes"===a[b].type){var d=new Event("pageChange");document.dispatchEvent(d)}}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var executed=!1;$(document).ready(function(){function a(){$(".counter-container").length>0&&$(window).scroll(function(){b()})}function b(){if(!executed){var a=.1*$(".counter-container").outerHeight();$(window).scrollTop()>$(".counter-container").offset().top-$(window).height()+a&&(executed=!0,$(".counter").each(function(){var a=$(this),b=a.attr("data-count");$({countNum:a.text()}).animate({countNum:b},{duration:3e3,easing:"linear",step:function(){a.text(Math.floor(this.countNum))},complete:function(){a.text(this.countNum)}})}))}}a()}),document.addEventListener("pageChange",function(){executed=!1,$(window).unbind("scroll"),init()}),window.onload=watch;
/*================ SQUARE STUDIO ANIMATED COUNTER PLUGIN END ================*/
</script>

 

Code Widget:

<div class="counter-container">
  <div id="counterbox">
  <div class="counter one" data-count="13">0</div><p>FIRMENANLÄSSE</p>
</div>
<div id="counterbox">
  <div class="counter two" data-count="33">0</div>     <p>HOCHZEITEN</p>
</div>
<div id="counterbox">
  <div class="counter three" data-count="3">0</div>     <p>MESSEN</p>
  <div id="counterbox">
  <div class="counter three" data-count="8">0</div>     <p>KONZERTE</p>
    <div id="counterbox">
  <div class="counter three" data-count="17">0</div>     <p>PRIVATANLÄSSE</p>
</div>
</div>

Did you contact the plugin provider