Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 2, 2022 at 4:25 am #1350144
    navindesigns

    On this thread. – https://kriesi.at/support/topic/change-animated-numbers-circle-border/ – I got some great support in fixing the animated numbers section on my homepage

    I am using the same animated section on this page – http://balrajt9.sg-host.com/about/ but I need a little bit of help to change the circles/borders to match my mockup a bit more

    Mockup – https://ibb.co/2yVqZh0

    I basically y need the left side to be white as well instead of transparent

    This is the CSS I have already that needs to be tweaked a little bit

    .page-id-235 #av_section_2 .avia-animated-number .avia-animated-number-circle-inner {
    border: 2px solid #007da5;
    border-radius: 50%;
    }
    .page-id-235 #av_section_2 .avia-animated-number .avia-animated-number-circle:after {
    display: block;
    border: 2px solid #969696;
    width: 100%;
    border-radius: 50%;
    transform: translateX(-4%);

    }

    Thanks as always

    May 2, 2022 at 6:35 am #1350155
    Ismael

    Hey navindesigns,

    Thank you for the inquiry.

    You can try this css code to add a white background behind the other circle with the blue border.

    .page-id-235 #av_section_2 .avia-animated-number .avia-animated-number-circle::before {
    display: block;
    border: none;
    width: 100%;
    border-radius: 50%;
    transform: translateX(-4%);
    background: white;
    z-index: 0;
    content: "";
    position: absolute;
    height: 100%;
}

    Best regards,
    Ismael

    May 2, 2022 at 6:35 am #1350156
    Ismael

    Hey navindesigns,

    Thank you for the inquiry.

    You can try this css code to add a white background behind the other circle with the blue border.

    .page-id-235 #av_section_2 .avia-animated-number .avia-animated-number-circle::before {
    display: block;
    border: none;
    width: 100%;
    border-radius: 50%;
    transform: translateX(-4%);
    background: white;
    z-index: 0;
    content: "";
    position: absolute;
    height: 100%;
}

    Best regards,
    Ismael

    May 23, 2022 at 2:41 am #1352589
    navindesigns

    This is perfect.

    Now I have one request on mobile.

    The circles are too big and the fonts are too small on mobile

    how can I achieve the following on mobile:

    1- reduce the size of the circle like 80%
    2- Increase the font size

    mockup – https://ibb.co/drYwT48

    May 23, 2022 at 5:55 am #1352597
    Nikko

    Hi navindesigns,

    @media only screen and (max-width:767px) {
  .page-id-235 #av_section_2 .avia-animated-number {
    margin: 75px 0 !important;
  }

  .page-id-235 #av_section_2 .avia-animated-number-circle {
    width: 80%;
  }

  .page-id-235 #av_section_2 .avia-animated-number-content p {
    font-size: 20px;
    line-height: 1.3;
  }
}

    Just adjust the values as you see fit.
    Hope this helps.

    Best regards,
    Nikko

    May 23, 2022 at 9:53 pm #1352678
    navindesigns

    That is perfect

    Would you be able to provide me with the css for the homepage animated blocks too?

    Home

    May 24, 2022 at 2:22 am #1352685
    Nikko

    Hi navindesigns,

    Can you try to change the last code I gave you with this one (so it is universal and not specific to one location):

    @media only screen and (max-width:767px) {
  #top #wrap_all .avia-animated-number {
    margin: 75px 0 !important;
  }

  #top #wrap_all .avia-animated-number-circle {
    width: 80%;
  }

  #top #wrap_all .avia-animated-number-content p {
    font-size: 20px;
    line-height: 1.3;
  }
}

    Best regards,
    Nikko

    May 26, 2022 at 3:30 am #1353002
    navindesigns

    Thank you that works

    Finally, on mobile:
    Can the space between the circles be the same for all – this is for the Homepage – http://balrajt9.sg-host.com/ and the ABOUT US page – http://balrajt9.sg-host.com/about/

    Screenshot – https://ibb.co/WxhLcSC

    May 27, 2022 at 4:51 am #1353088
    Nikko

    Hi navindesigns,

    I have added this code inside the last CSS code I gave (in Quick CSS)

    #top #wrap_all .avia-animated-number-content {
    min-height: 120px;
}

    then in your homepage I have duplicated the hr element on top of those circles, the original I have hidden in mobile devices, while the duplicate is changed to have a positive space instead of negative then make it visible only to mobile.
    Please review your site.

    Best regards,
    Nikko

    May 29, 2022 at 3:32 am #1353310
    navindesigns

    Thanks. That works but now the texts are not vertically centered with the circle so there is a ton of white space underneath

    Screenshot – https://ibb.co/80kny8b

    How can I fix that?

    May 30, 2022 at 3:58 am #1353389
    Nikko

    Hi navindesigns,

    Please remove all the code I gave you in this thread and replace it with this one instead:

    @media only screen and (max-width:767px) {
  #top #wrap_all .avia-animated-number {
    margin: 75px 0 !important;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    min-height: 140px;
  }

  #top #wrap_all .avia-animated-number-circle {
    width: 80%;
  }

  #top #wrap_all .avia-animated-number-content p {
    font-size: 20px;
    line-height: 1.3;
  }
}

    Best regards,
    Nikko

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.