html - How to change button size depending on device?

Question

I have got a button on my website, which becomes tiny, when you visit it from mobile. I have tried a few things to fix this, but they failed to complete my objective.

#generate {
  background-color: #FFAF19;
  outline: none;
  border: none;
  color: white;
  border-radius: 10px;
  width: 200px;
  height: 50px;
  font-family: 'Cabin', sans-serif;
  font-weight: bolder;
  font-size: 25px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

#generate:hover {
  transition: .5s;
  background-color: #e59d16;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#generate:active {
  transition: .1s;
  background-color: #e59d16;
  transform: translateY(4px);
}

@media screen and (min-width: 601px) {
  #generate {
    width: 200px;
    height: 50px;
  }
}

@media screen and (max-width: 600px) {
  #generate {
    width: 200px;
    height: 50px;
  }
}

question from:https://stackoverflow.com/questions/65882604/how-to-change-button-size-depending-on-device

Answer 1

The size of the button actually needs to be different on smaller screen sizes if you want it to increase in size. So change it in @media screen and (max-width: 600px).

Here is an example:

#generate {
    background-color: #FFAF19; outline: none; border: none; color: white; border-radius: 10px; width: 200px; height: 50px; font-family: 'Cabin', sans-serif; font-weight: bolder; font-size: 25px; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;
  }
  #generate:hover {
    transition: .5s;
    background-color: #e59d16;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
  #generate:active {
    transition: .1s;
    background-color: #e59d16;
    transform: translateY(4px);
  }
  @media screen and (min-width: 601px) {
    #generate {
      width: 200px; height: 50px; 
    }      
  }
  @media screen and (max-width: 600px) {
    #generate {
      width: 300px; height: 75px;  
    }
  }

<button id="generate">Generate</button>