Customizing wizard styling

Hi! I did the learning path “Create an app with advanced page building” and followed the steps for creating a three step wizard. However the styling of the text does not look what I was expected using the classes “wizard-step-active”, “wizard-step-visited” and “wizard-step”. The text gets squished for each step. I am not that familiar to CSS or SASS, but could someone point me in the direction of fixing this.   I am trying with different spacings to right and left of my containers with the different steps but then the arrows or texts are covered. I have also tried looking into the custom-variables.scss file but don’t really not know what to change   Step 1:   Step 2:   Step 3:
1 answers

What is the desired result?

this is the standard styling for the wizard from the building blocks (wizard arrow), it depends on what you want to change.


e.g. if you wish to change the active-color you can do so by adding this in a custom-scss file:

.wizard-arrow .wizard-step-active {
    background-color: #yourhexcolorhere;


However, due take note, the diagonal arrow part that's behind it should also be targeted, which can be done through like so:

.wizard-arrow .wizard-step-active::after {
    border-left-color: #yourhexcolorhere;