How do I change element size based on screen size?-CodePudding

I have an element (the button) and I would like to make it appear a bit bigger for smaller screens, how do I do that using css? the size is perfect for a desktop sized screen but on mobile the button appears way too small.

<html>
    <header>
        <link rel="stylesheet" type="text/css" href="./style.css"/>
    </header>
        <div class= "buttonbox">
      <form action="https://www.faster.rent">
         <button  type="submit">click Here!</button>
      </form>
        </div>
</html>

.button1 {
  background-color: #ffffff;
  border: 2px solid #e5ff00;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  width: 142px;
}

CodePudding user response：

you can use @media screen and (max-width: 480px) In the place of max-width, you can also use min-width and px as per your need

CSS in @media screen and (max-width: 480px) will only work for the particular screen size.

.button1 {
  background-color: #ffffff;
  border: 2px solid #e5ff00;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  width: 142px;
}

@media screen and (max-width: 480px) {
  .button1 {
  background-color: #fff;
  border: 2px solid #e5ff00;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  width: 250px;
}
 }

CodePudding user response：

Just copy this and pest in your css file and show the change in between desktop and mobile device

.button1 {
  background-color: #ffffff;
  border: 2px solid #e5ff00;
  color: rgb(0, 0, 0);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  width: 142px;
}

@media screen and (max-width: 500px) {
 .button1 {
     padding: 5px 16px;
     font-size: 12px;
     color: green;
  }
}

CodePudding user response：

I find that 768 pixels is the best breakpoint for detecting mobile viewports.

@media screen and (max-width: 767px) {
  button {
    font-size: 2em;
  }
}

<button>Click Me</button>

CodePudding user response：

For example, in Bootstrap you can use the btn-lg class to make the button appear larger on smaller screens:

<button >Click me</button>

This will make the button appear larger on screens less than 576px, while keeping the default size for larger screens