Custom CSS formatting in mobile view

Hello,

I'm updating our site and changing to 7.1 at the same time. I've copied over custom CSS from our current 7.0 site that creates a scrolling number effect, but it's not lining up properly in the new mobile view after I update the text information I want to display. I tried changing the parameters that are included (padding, line spacing, etc), but I can't figure out how to get it to line up properly (I'm not a coding expert, as you can tell :-)). Below is the code from the current website with the updated text information I want to display on the new page included (again, it works find in desktop view, but just not mobile view), Current website is https://nhscares.org, and the new site I'm working on is https://sponge-gold-8hcr.squarespace.com/config/design  - the problem page is found under "The Facts" -> "For Parents", Password is: Preview

I appreciate your help!!

 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

var a = 0;

$(window).scroll(function() {

 

  var oTop = $('#counter').offset().top - window.innerHeight;

  if (a == 0 && $(window).scrollTop() > oTop) {

    $('.counter-value').each(function() {

      var $this = $(this),

        countTo = $this.attr('data-count');

      $({

        countNum: $this.text()

      }).animate({

          countNum: countTo

        },

        {

          duration: 2000,

          easing: 'swing',

          step: function() {

            $this.text(Math.floor(this.countNum));

          },

          complete: function() {

            $this.text(this.countNum);

          }

        });

    });

    a = 1;

  }

});

</script>

<div id="counter">

    <div class="sqs-col sqs-col-4 counter-value" data-count="23" data-desc="% of 6th graders have tried alcohol">0</div>

  <div class="sqs-col sqs-col-4 counter-value" data-count="24" data-desc="% of 12th graders have used e-cigarettes in the past 30 days">0</div>

   <div class="sqs-col sqs-col-4 counter-value" data-count="23" data-desc="% say it's easy to get perscription drugs">0</div>

   <div class="sqs-col sqs-col-4 counter-value" data-count="14" data-desc="% were bullied through texting or social media">0</div>

     <div class="sqs-col sqs-col-4 counter-value" data-count="35" data-desc="% felt sad or depressed MOST days in the past 12 months">0</div>

     <div class="sqs-col sqs-col-4 counter-value" data-count="15" data-desc="% planned suicide in the past 12 months">0</div>

  

<style>

.counter-value {

    font-size: 120px;

   line-height:2em;

   text-align:center;

   padding:17px 0;

}

  .counter-value:after {

   content: attr(data-desc);

    display:block;

    text-transform:uppercase;

    font-size: 20px;

    line-height:1.2em;

  }

</style>

On Mobile, the number too big or doesn't run or?

https://sponge-gold-8hcr.squarespace.com/for-parents

It runs, but the text isn't lined up. Here's a picture of the current site, where the text fits in a line, and the new site, where it's no longer lined up.

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
.counter-value {
    font-size: 50px !important;
}

.counter-value:nth-child(3n+1) {
    clear: left;
}
}

This looks SO MUCH BETTER! One other question - I would like to format it so that a single word is not split into two separate lines. If I make the font size smaller, then I can get each word on its own line, but it looks very crowded with 3 text columns so close together.  

Is there a way I could stretch out the width of these columns to fit more text on a line? I also found that I can change 3n+1 to 2n+1 in ".counter-value nth-child (3n+1)" to get two columns instead of 3, but then the columns are left-justified and I can't figure out how to get it centered. How could I center it?

THANK YOU:-)

Thank you VERY much for your help!