Classic Skill Bar: Headers won't display as block

[seofreelance]

Hi, Team.
I am trying to make these skill bars at https://www.seomanager.es/sobre-mi/ to behave as block even if they have enough room (at certain viewport width) due to “shorter” skill bar values. Please see capture from viewport simulation for better understanding:

I need them (Sectores, Comunicación) to break apart and be on top of their skill bars.

This is the page CSS I am using. BTW, is there a cleaner way to get what I intend to in the snippet without using “!important” which might be unefficient?

@media only screen and (min-width: 320px) {
  .bar {
  	display: block;
    height: 5.0em!important;
    background: hsla(215, 89%, 49%, 0.7)!important;
	}
}

Thank you very much!

[tristup]

Hi Ricard,

Thanks for reaching out.
I have checked the URL and found the problem you are describing here, and it seems the problem is with the custom CSS code that has been added to your website. I would suggest you check and remove all the custom CSS temporarily and check if that resolves your issue.
Please remember that we don’t offer any investigation or support on custom coding, as it is beyond the scope Theme Support. If you still want us to investigate it, I would suggest you please avail our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[seofreelance]

Well, thanks for the hint anyway. Will rework it from scratch. Have a nice day.

[tristup]

Hi Ricard,

You are most welcome