Mat-horizontal-stepper responsive

[guilhermebhte]

Estou precisando fazer o componente <mat-horizontal-stepper [linear]="true" #stepper>, ficar responsivo.

Já tentei algumas formas, mas nada.

<div class="registro-register">
    <div class="registro-register-box">
        <mat-card>
            <mat-card-content>
                <div fxLayoutAlign="center center" fxLayout="column">
                    <mat-horizontal-stepper [linear]="true" #stepper>
                        <mat-step [stepControl]="primeiroResponsavelFormGroup">
                            <form [formGroup]="primeiroResponsavelFormGroup">
                                <ng-template matStepLabel>{{ 'registro.step.um' | translate }}</ng-template>
                                <mat-card-content>
                                    <div>
                                        <div fxLayout="row" fxLayoutAlign="start start">
                                            <mat-form-field>
                                                <input matInput placeholder="{{ 'registro.nome' | translate }}" 
                                                    id="nome" formControlName="nome" name="nome" required>
                                            </mat-form-field>
                                        </div>
                                    </div>
                                    <div>
                                        <div fxLayout="row" fxLayoutAlign="start start">
                                            <mat-form-field>
                                               <input matInput placeholder="{{ 'registro.sobre.nome' | translate }}" 
                                                    id="sobreNome" formControlName="sobreNome" name="sobreNome" required>
                                            </mat-form-field>
                                        </div>
                                    </div>
                                    <div>
                                        <div fxLayout="row" fxLayoutAlign="start start">
                                            <mat-form-field>
                                                <input matInput placeholder="{{ 'registro.cpf' | translate }}" 
                                                    id="cpf" formControlName="cpf" name="cpf"
                                                    [textMask]="{mask: cpf}" required>
                                            </mat-form-field>
                                        </div>
                                    </div>
                                    <div>
                                        <div fxLayout="row" fxLayoutAlign="start start">
                                            <mat-form-field>
                                                <input matInput placeholder="{{ 'registro.celular' | translate }}" 
                                                    id="celular" formControlName="celular" name="celular"
                                                    [textMask]="{mask: celular}" required>
                                            </mat-form-field>
                                       </div>
                                    </div>
                                    <div>
                                        <div fxLayout="row" fxLayoutAlign="start start">
                                            <mat-form-field>
                                                <input matInput placeholder="{{ 'registro.telefone' | translate }}" 
                                                    id="telefone" formControlName="telefone" name="telefone"
                                                    [textMask]="{mask: telefone}">
                                            </mat-form-field>
                                        </div>
                                    </div>
                                </mat-card-content>
                            </form>
                        </mat-step>
                        <mat-step [stepControl]="segundoUsuarioFormGroup">
                            <form [formGroup]="segundoUsuarioFormGroup">
                                <ng-template matStepLabel>{{ 'registro.step.dois' | translate }}</ng-template>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'registro.login' | translate }}"
                                                id="login" formControlName="login" name="login" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'registro.confirme.login' | translate }}"
                                                id="confirmeLogin" formControlName="confirmeLogin" 
                                                name="confirmeLogin" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'registro.email' | translate }}"
                                                id="email" formControlName="email" name="email" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'registro.confirme.email' | translate }}"
                                                id="confirmeEmail" formControlName="confirmeEmail" name="confirmeEmail"
                                                required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput type="password" placeholder="{{ 'registro.senha' | translate }}" id="senha" 
                                                formControlName="senha" name="senha" [type]="hide ? 'text' : 'password'"
                                                (change)="validaSenha()" required>
                                            <mat-icon matSuffix (click)="hide = !hide">
                                                {{hide ? 'visibility' : 'visibility_off'}}
                                            </mat-icon>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput type="password" placeholder="{{ 'registro.confirme.senha' | translate }}" 
                                                id="confirmeSenha" formControlName="confirmeSenha" name="confirmeSenha"
                                                [type]="hide ? 'text' : 'password'" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                            </form>
                        </mat-step>
                        <mat-step [stepControl]="terceiroEnderecoFormGroup">
                            <form [formGroup]="terceiroEnderecoFormGroup">
                                <ng-template matStepLabel>{{ 'registro.step.tres' | translate }}</ng-template>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'endereco.cep' | translate }}"
                                                id="cep" formControlName="cep" name="cep" maxlength="11" 
                                                [textMask]="{mask: cep}" (change)="buscarCep()" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'endereco.tipo.logradouro' | translate }}" 
                                                id="tipoLogradouro" formControlName="tipoLogradouro" name="tipoLogradouro" 
                                                value="{{endereco?.tipoLogradouro}}" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'endereco.logradouro' | translate }}"
                                                id="logradouro" formControlName="logradouro" name="logradouro"
                                                value="{{endereco?.logradouro}}" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'endereco.numero' | translate }}" id="numero" 
                                                formControlName="numero" name="numero" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'endereco.complemento' | translate }}" 
                                                id="complemento" formControlName="complemento" name="complemento" 
                                                value="{{endereco?.complemento}}">
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{{ 'endereco.bairro' | translate }}" id="bairro" 
                                                formControlName="bairro" name="bairro" value="{{endereco?.bairro}}" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <input matInput placeholder="{ 'endereco.cidade' | translate }}" id="cidade" 
                                                formControlName="cidade" name="cidade" value="{{endereco?.cidade}}" required>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <mat-label jhiTranslate="endereco.estado"></mat-label>
                                            <mat-select id="idEstado" formControlName="idEstado" 
                                                name="idEstado" required>
                                                <mat-option></mat-option>
                                                <mat-option *ngFor="let estado of estados" 
                                                    [value]="estado.id">
                                                    {{estado.nome}}
                                                </mat-option>
                                            </mat-select>
                                        </mat-form-field>
                                    </div>
                                </div>
                            </form>
                        </mat-step>
                        <mat-step [stepControl]="quartoFormGroup">
                            <ng-template matStepLabel>{{ 'registro.step.quatro' | translate }}</ng-template>
                            <form [formGroup]="quartoFormGroup">
                                <div>
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <mat-form-field>
                                            <mat-label jhiTranslate="registro.tipo.plano"></mat-label>
                                            <mat-select id="tipoPlanoVenda" formControlName="tipoPlanoVenda" 
                                                name="tipoPlanoVenda" required>
                                                <mat-option></mat-option>
                                                <mat-option *ngFor="let tipoVenda of tiposVendas" 
                                                    [value]="tipoVenda.key">
                                                    {{tipoVenda.descricao}}
                                                </mat-option>
                                            </mat-select>
                                        </mat-form-field>
                                    </div>
                                </div>
                                <div fxLayout="row" fxLayoutAlign="space-evenly stretch">
                                    <div fxFlex.gt-sm="40" fxFlex.gt-xs="40" fxFlex="40">
                                        <mat-card>
                                            <mat-card-content>
                                                <mat-card-title>{{planosVenda.nome}}</mat-card-title>
                                                <h2>{{ 'geral.moeda' | translate }}: {{planosVenda.preco | currency}}</h2> 
                                                <mat-card-subtitle>{{ 'vendas_web.valor.mes' | translate }}</mat-card-subtitle>
                                                <div>
                                                    {{ 'vendas_web.valor.ano' | translate }}: 
                                                    {{ 'geral.moeda' | translate }} 
                                                    {{planosVenda.descontoAnualValor | currency}}, 
                                                    {{ 'vendas_web.desconto' | translate }}:
                                                    {{planosVenda.descontoAnualPorcentagem | currency}} 
                                                    {{ 'geral.porcentagem' | translate }}
                                                </div>
                                                <div>
                                                    {{ 'vendas_web.valor.trimestre' | translate }}: 
                                                    {{ 'geral.moeda' | translate }} 
                                                    {{planosVenda.descontoSemetralValor | currency}}, 
                                                    {{ 'vendas_web.desconto' | translate }}:
                                                    {{planosVenda.descontoSemetralPorcentagem | currency}} 
                                                    {{ 'geral.porcentagem' | translate }}
                                                </div>
                                                <div>
                                                    {{ 'vendas_web.valor.semestre' | translate }}: 
                                                    {{ 'geral.moeda' | translate }} 
                                                    {{planosVenda.descontoTrimestralValor | currency}}, 
                                                    {{ 'vendas_web.desconto' | translate }}:
                                                    {{planosVenda.descontoTrimestralPorcentagem | currency}} 
                                                    {{ 'geral.porcentagem' | translate }}
                                                </div>
                                                {{planosVenda.descricao}}
                                            </mat-card-content>
                                        </mat-card>
                                    </div>
                                    <div fxFlex.gt-sm="40" fxFlex.gt-xs="40" fxFlex="40">
                                        <mat-card>
                                            <mat-card-content>
                                                <mat-form-field>
                                                    <mat-label jhiTranslate="registro.meio.pagamento"></mat-label>
                                                    <mat-select id="meioPagamento" formControlName="meioPagamento" 
                                                        name="meioPagamento" required>
                                                        <mat-option></mat-option>
                                                        <mat-option *ngFor="let meio of meiosPagamento" 
                                                            [value]="meio.id">
                                                            {{meio.name}}
                                                        </mat-option>
                                                    </mat-select>
                                                </mat-form-field>
                                            </mat-card-content>
                                        </mat-card>
                                    </div>
                                </div>
                            </form>
                        </mat-step>
                    </mat-horizontal-stepper>
                </div>
                <h6 class="text-danger m-t-0 m-b-10" jhiTranslate="geral.campos.obrigatorios"></h6>
                <div div fxLayout="row" fxLayoutAlign="end none">
                    <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
                        <button mat-stroked-button *ngIf="botaoAnteriorAparecer"
                            (click)="anterior(stepper)" matTooltip="{{ 'registro.navegacao.anterior' | translate }}">
                            <mat-icon>skip_previous</mat-icon>
                        </button>
                        <button mat-stroked-button *ngIf="botaoProximoAparecer" 
                            (click)="proximo(stepper)" matTooltip="{{ 'registro.navegacao.proximo' | translate }}">
                            <mat-icon>skip_next</mat-icon>
                        </button>
                        <button mat-raised-button *ngIf="botaoSalvar" color="primary" 
                            (click)="salvar()"
                           type="button" matTooltip="{{ 'registro.navegacao.confirmar.salvar' | translate }}">
                           <mat-icon>save</mat-icon>
                        </button>
                   </mat-button-toggle-group>
               </div>
           </mat-card-content>
       </mat-card>
   </div>
</div>

O que precido fazer ?

[javaflex]

aqui tem um exemplo

Stepper overview - StackBlitz