Jump to content

Custom CSS formatting in mobile view

Go to solution Solved by tuanphan,

Recommended Posts

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>

Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

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:-)

Screenshot 2023-07-25 at 12.53.34 PM.png

Link to comment
  • Solution

Use this code

@media screen and (max-width:767px) {
.counter-value{
   width: 50% !important;
    clear: none !important;
}
.counter-value:nth-child(2n+1) {
    clear: left !important;
}
.counter-value:after {
    font-size: 12px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.