Я пытаюсь изменить размер кнопки в мобильной перспективе, но размер ее текста тоже не меняется. Я пытаюсь сделать это в мобильной перспективе. Может, в этом случае стоит использовать flex.

Кнопка

как я меняю его размер

HTML:

<ng-container matColumnDef="acoes" style=" position: left;" >
          <button mat-stroked-button color="primary" (click)="gerarCertificado(inscricao)" class="width-button">GERAR CERTIFICADO<mat-icon class="md-15">play_arrow</mat-icon> </button>  
      </ng-container>

CSS:

  @media (max-width: 480px) {
    .width-button{
        max-width: 2%;
    }
  }
0
TendenciesD 17 Сен 2021 в 22:46

2 ответа

Лучший ответ

Просто измените font-size, и button изменится соответствующим образом.

button {
  padding: .5rem 1rem;
  font-size: 1.2rem;
}

/*
   You would put this code in your media query, but I'm just emulating the
   device with a class for the example.
*/
button.mobile {
  font-size: .8rem;
}
<button>Desktop</button>
<button class="mobile">Mobile</button>
0
sno2 17 Сен 2021 в 20:02

Чтобы изменить размер текста, измените значение font-size на меньшее, и если содержимое выходит за пределы контейнера, используйте свойство overflow: auto

.lbtn{
padding:10px;
font-size:28px;/*Default font-size is 16px*/
}
.sbtn{
padding:0px;
font-size:10px;/*Default font-size is 16px*/
}
<button class="lbtn">Large button</button>
<button class="sbtn">Smaller button</button>
0
Rana 17 Сен 2021 в 20:10