Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #358813

    Guys, is it just me or are the animated numbers not responsive?

    #358833

    is there a fix to this? I’ve searched the site, someone else had a problem with this too – but there was no response.

    #358859

    Hey!

    Thank you for using Enfold.

    Can you please provide a link to the actual page with the issue? A screenshot will help. Make sure that you’re running Enfold 3.0.4 on WordPress 4.0.1.

    Regards,
    Ismael

    #359250
    This reply has been marked as private.
    #359445

    Hi!

    Thank you for the link.

    Please add this on Quick CSS or custom.css:

    @media only screen and (max-width: 767px) {
    strong.heading.avia-animated-number-title span {
    font-size: 20px !important;
    }
    }

    Best regards,
    Ismael

    #359993

    Hi Ismael,

    Reducing the font size is a quick work around, but this doesn’t make it responsive.

    If the font remains the same size at 80px, and the text reaches the end of the screen it should drop down to the next line right? Whats the code to make it truely responsive?

    #359998

    what about using webkit? Will that work?

    #360399

    hey guys? do we have a better work around??

    #360450

    Hey!

    Try with this:

    @media only screen and (max-width: 767px) {
    	strong.heading.avia-animated-number-title span {
    		display: block;
    		font-size: 35px;
    		line-height: 40px;
    	}
    }

    Cheers!
    Josue

    #360498

    nope that’s not great either.

    Seems like there a few design issues with the new features with the latest update thats going to need some attention when it comes to responsiveness.

    Cheers,

    Bocce

    #360503

    Please create a mockup of what would you want to achieve in mobile view.

    Best regards,
    Josue

    #360577

    It should simply perform like any normal <h1>, <h2> etc.

    When you place display: block it puts the animated number on its own line, and then treats the rest of the text as a header.
    For example:

    50
    % off today’s deal.

    When it should be something like:

    50% off today’s
    deal

    Notice how it treats the animated number differently to the rest of the heading? Hence the percentage doesn’t make sense now.

    Hope that helps.
    you also you’ll find that the new av separator – custom icon function doesn’t center on mobile.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Animated numbers are not responsive’ is closed to new replies.