Steps in phone

[RomeroApen]

Using Materials 3 works perfect in monitors. But in phones... well....

Some tips to fix that? Thanks.

[yordanov]

Hi @RomeroApen,

You can use CSS media query to either hide the title or list the steps below each other. Add it to your app css after the theme.css file.

To hide the titles:

@media (max-width: 576px) {
    .rz-steps-title {
        display: none;
    }
}

To list the steps vertically:

@media (max-width: 576px) {
    .rz-steps [role=tablist] {
        display: block;
    }

    .rz-steps .rz-steps-item {
        display: block;
        padding: 0.25rem 0;
    }
}

[RomeroApen]

@yordanov

@media (max-width: 576px) {
    .rz-steps-title {
        display: none;
    }
}

Thanks! It works perfectly.