Question 235974 in CSS Question posted in
Some basic documentation can be found here.

Css – Responsive Bootstrap Button according to screen sizes

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;
}
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Try using vmin or vmax units.
    If you don’t want to use media query find a perfect value that works for you.
    For reference how they work check out this blog: CSS Units

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search