.wizard > .steps > ul > li
    {
        white-space: nowrap;
       
    }


@media (max-width: 480px) {
            .wizard > .steps > ul > li {
                width: 100% !important;
            }

}
@media only screen and (min-width: 481px) and (max-width: 700px) {
    .wizard > .steps > ul > li {
        width: 50% !important;
    }
}
@media only screen and (min-width: 701px) and (max-width: 1200px) {
    .wizard > .steps > ul > li {
        width: 33.3% !important;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1300px) {
    .wizard > .steps > ul > li {
        width: 25% !important;
    }
}
@media only screen and (min-width: 1301px) {
    div[name="studentJoinWizardDiv"] > .steps > ul > li {
        width: 18%;
    }

    div[name="renewWizardDiv"] > .steps > ul > li {
        width: 18%;
    }

        div[name="renewWizardDiv"] > .steps > ul > li:nth-child(2) {
            width: 24%;
        }

        div[name="renewWizardDiv"] > .steps > ul > li:nth-child(4) {
            width: 22%;
        }

    div[name="joinWizardDiv"] > .steps > ul > li:nth-child(2) {
        width: 22%;
    }

    div[name="joinWizardDiv"] > .steps > ul > li:nth-child(5) {
        width: 20%;
    }

    div[name="studentJoinWizardDiv"] > .steps > ul > li {
        width: 18%;
    }

    div[name="joinWizardDiv"] > .steps > ul > li {
        width: 16%;
    }

        div[name="joinWizardDiv"] > .steps > ul > li:nth-child(2) {
            width: 22%;
        }

        div[name="joinWizardDiv"] > .steps > ul > li:nth-child(5) {
            width: 20%;
        }
}