Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 27, 2014 at 4:36 am #358813
    Bocce

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

    November 27, 2014 at 5:51 am #358833
    Bocce

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

    November 27, 2014 at 7:19 am #358859
    Ismael

    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

    November 27, 2014 at 11:56 pm #359250
    Bocce
    This reply has been marked as private.
    November 28, 2014 at 8:30 am #359445
    Ismael

    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

    November 29, 2014 at 3:29 am #359993
    Bocce

    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?

    November 29, 2014 at 4:16 am #359998
    Bocce

    what about using webkit? Will that work?

    November 30, 2014 at 9:11 pm #360399
    Bocce

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

    November 30, 2014 at 11:19 pm #360450
    Josue

    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

    December 1, 2014 at 12:55 am #360498
    Bocce

    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

    December 1, 2014 at 1:40 am #360503
    Josue

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

    Best regards,
    Josue

    December 1, 2014 at 4:51 am #360577
    Bocce

    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.

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