Div aparecer só para smartphones e/ou tablets - resolvido

Front-end
#1

image
image.png1242×568 16.1 KB 

<div class="content p-24" fusePerfectScrollbar>
              <div class="demo-sidebar">
                <mat-list>
                  <mat-list-item>
                    <span>Prazo da Campanha</span>:
                  </mat-list-item>
                  <mat-list-item>
                    <b>{{
                      financiamento?.financiamento?.dataPrazo
                        | date: "shortDate"
                    }}</b>
                  </mat-list-item>
                  <mat-list-item>
                    <span>Duração Esperada</span>:
                  </mat-list-item>
                  <mat-list-item>
                    <b>{{ financiamento?.financiamento?.parcela }} meses</b>
                  </mat-list-item>
                  <mat-list-item>
                    <span>Valor Financiado R$</span>
                  </mat-list-item>
                  <mat-list-item>
                    <b>{{ financiamento?.financiamento?.valor | currency }}</b>
                  </mat-list-item>
                  <mat-list-item>
                    <span>Rentabilidade mensal</span>
                  </mat-list-item>
                  <mat-list-item>
                    <b
                      >{{
                        financiamento?.financiamento
                          ?.percentualJurosNegociadoInvestidor | currency
                      }}
                      %</b
                    >
                  </mat-list-item>
                  <mat-list-item>
                    <span>Risco de Crédito</span>
                  </mat-list-item>
                  <mat-list-item>
                    <b>{{
                      financiamento?.financiamento?.classificacaoRisco
                    }}</b>
                  </mat-list-item>
                  <mat-list-item *ngIf="statusFinanciamento === 'ACEITANDO'">
                    <button
                      mat-raised-button
                      color="primary"
                      class="submit-button"
                      (click)="simulacao()"
                    >
                      Simular e investir
                    </button>
                  </mat-list-item>
                </mat-list>
              </div>
            </div>

Como fazer com que este div, só aparece em telas de smartphones e/ou tablets. Se for PC ou notebook, não aparece.

#2

Consegui assim:

<div class="content p-24 mobile" id="mobile" fusePerfectScrollbar>

#mobile {
  display: none !important;
}

@media screen and (max-width: 1100px) {
  #mobile {
    display: contents !important;
  }
}
#3

Evite ao máximo o uso do !important!

Se você quiser utilizar outro parametro, por exemplo: display block, o !important vai sobrescrever e as novas alterações feitas nessa div não vão funcionar.

Justamente porque o important sobrescreve tudo.

1 curtida
#4

Vou testar sem o !important

#5

Funcionou. Valeu

1 curtida