Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 7, 2015 at 6:29 pm #376308
    Kevin

    Hello Support,

    http://omexdev.bydecosta.com/
    Is it possible to have the Animated Numbers layout to be displayed as follows:
    Number on left and description on right.

    Currently the Number is on top and description is below.

    Below is a screen capture of how we would like it to look like:

    Thanks again for your help.

    MP

    January 7, 2015 at 7:50 pm #376378
    begrafiks

    Hi kpundyk ;
    here is what I foudn on my end :

    float left for the “number” :
    .number_prepared .avia-animated-number-title{float: left !important;}

    float left for the “text” :
    .avia-animated-number-content{float: left !important; margin-left: 15px !important; line-height: 19px !important; width: 150px !important; height: 40px !important; text-align: left !important;}

    The Question is :
    1- How to insert these codes in order to not to creat unwilling changes on th orher Animated numbers ?
    You can use your Animated numbers in a Color section and add an ‘id’.

    2- How to center the text in the height of the bloc ?
    Sorry I’ve no idea right now.

    January 7, 2015 at 8:50 pm #376427
    Kevin

    Thats perfect that works but now how I centre those 3 columns?

    We would like to eventually make it look like the screen cap below:

    Thanks again.
    KP

    January 7, 2015 at 9:28 pm #376465
    Kevin

    Hello Support I have updated the Quick CSS and its looking great.
    Is there a way to have the middle “12 / Experts on Staff” be centre and “32 Members” align to the right.
    Also “32 Members”, do you think we can align the text to the middle ?.

    /* HOME ANIMATED NUMBERS LAYOUT */

    .number_prepared .avia-animated-number-title{float: left !important;}

    .avia-animated-number-content{float: left !important; margin-left: 15px !important; line-height: 19px !important; width: 150px !important; height: 40px !important; text-align: left !important;}

    /* HOME ANIMATED NUMBERS */

    .avia-animated-number-title {
    font-family: ‘Roboto’, sans-serif !important;
    font-weight:100 !important;
    }

    .avia-animated-number-content {
    font-family: ‘Roboto’, sans-serif !important;
    font-weight:100 !important;
    line-height: 1.1em !important;
    height:0% !important;
    margin-top: 6px !important;
    }

    January 7, 2015 at 10:39 pm #376508
    begrafiks

    You can try this layout :
    1/5 1st Animated number,
    1/5 block empty,
    1/5 2nd Animated number,
    1/5 block empty,
    1/5 3th Animated number.

    January 9, 2015 at 7:15 am #377223
    Josue

    Hey!

    You can also set a custom class (ex: animated_number_align_right) to the last animated number element:

    .animated_number_align_right {
    float: right;
}

    Cheers!
    Josue

    January 9, 2015 at 4:26 pm #377407
    Kevin

    Perfect… thanks for your help

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Animated Numbers – layout’ is closed to new replies.