How do I centre my animated bars when resizing window?

Hey guys!

So I’m trying to improve my portfolio page and I’d like to add some cool animated bars to display my language skills. I was able to make bars work well enough but I can’t seem to figure out how to centre them in a way that works when you resize the window. I would like to have them aligned so that the “label” is on the left side of the bar. The codepen below is what I’ve done so far (copied directly from the portfolio for clarity).


Couldn’t embed the pen due to restrictions on new forum users :cry:
EDIT: oh it seems to work anyway haha :smile:

Thank you in advance and if you have any other ideas on how to improve this I’m listening!

Bootstrap displays both your bar and label as block elements on small screens and those take the full width of the screen. You could add a container that surrounds the bar and label, and make that responsive instead of content.

These problems are really easy to solve with flexbox. If you want to check it out, try this tutorial.

Thanks for the tip - I didn’t even think about wrapping the content into a responsive container. And that tutorial was actually really nice too!