Responsive Bootstrap Button according to screen sizes

Question

I would like this button to be responsive, automatically adjusting its size to fit various screen dimensions. In this following code button is fixed and not moving. Here is the code.

<button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened"
        (click)="open()">Login</button>

CSS Code:

#btnLogin1 {
  background-color: #0057b8;
  border: 1px solid #0057B8;
  color: #fff !important;
  height: 35px;
  width: 200px;
  font-size: large;
  margin: 35px 0 0;
  padding: 25px 100px;
  font-weight: 700;
  border-radius: 10px;
}

Answer 1

You can achieve this with using media queries. As shown in following code.

#btnLogin1 {
  background-color: #0057b8;
  border: 1px solid #0057B8;
  color: #fff !important;
  height: auto;
  max-width: 300px;
  font-size: large;
  margin: 35px 0 0;
  padding: 25px 100px;
  font-weight: 700;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  #btnLogin1 {
  height: auto;
  max-width: 200px;
  padding: 25px 50px;
}
}

<button type="button" [className]="'btn btn-block m-0'" kendoButton id="btnLogin1" *ngIf="!opened"
        (click)="open()">Login</button>