Help modify skill-bar in about us

Illdy
1

Hello,

I am trying to remove the % bar, the grey line and ideally reduce the line space between multiple skills.

I have tried the following two code that i found on other forum comments but none of them worked:

#about .skill .skill-top .skill-progress-bar .ui-progressbar-value .ui-progressbar-value-top{
display: none !important;
content: none;
}

#about .skill .skill-top .skill-progress-bar {
background-color: none;
}

Website address is numeric.com.pk

Thanks,

2

Hello there,

I hope you are doing well today.

Please try using the following CSS code to remove the bar and adjust the spacing:


/*Remove bars*/
#about .skill .skill-top .skill-progress-bar .ui-progressbar-value {
    display: none;
}

#about .skill .skill-top .skill-progress-bar {
    display: none;
}

/*Top Margin*/
#about .widget_illdy_skill {
    margin-top: 50px;
}

Best Regards,
Support

3

Worked beautifully

Thank you very much!

4

Hi,

Thanks for keeping us updated, you are very most welcome.

Best Regards,
Support

5

Hi there,

This worked for me as well, but I’d like to also get rid of the skill “names.” A workaround is to add a skill with a blank name, but that creates extra space.

Thanks!

6

Hi,

Thanks for getting in touch with us, could you please provide a screenshot of what exactly you are talking about.

Best Regards,
Support

7

Thanks Support! Please see screenshot attached.

I want to get rid of Typography, Design, and Development.

8

Hey @darrow,
Hope you’re doing well today

In order to remove the skill names (inclusive of the icons), you may add the code below:

/remove skill titles/
.skill-bottom {
display: none!Important;
}

Just in case you’d like to keep the icons, however, you may use this code instead:

/remove skill titles (keep icons)/
.skill-bottom span {
display: none!Important;
}

I hope this helps :slight_smile:

Best Regards,
Support

9

Thanks Support! That did the trick; however, is there some CSS I can use to remove the extra padding?

10

Hey there,
Hope you’re doing well today

You may add the code below to Appearance > Customize > Additional CSS to reduce the space:

#about .section-header {
margin-bottom: 80px;
}

You may cut the 80px down to a better value if you see that you need less space.

I hope this helps :slight_smile:

Best Regards,
Support

11

Thanks! Yep, that did it.

12

Hello there,

I am glad the solution worked out.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support