How do I change element size based on screen size?

Question

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 class="button1" 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;
}

you can use media query or view port do little search about it both thing are nice and belongs to css oe you can use built in libraries like bootstrap or material UI — shoaib sabir, Dec 24 '22 at 15:33
Does this answer your question? [How to make this code as responsive](https://stackoverflow.com/questions/29840875/how-to-make-this-code-as-responsive) — shoaib sabir, Dec 24 '22 at 15:36

score 0 · Answer 1 · answered Dec 24 '22 at 15:34

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

<button class="btn btn-primary btn-lg">Click me</button>

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

score 0 · Answer 2 · answered Dec 24 '22 at 15:41

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

Mohidul Islam · Answer 3 · 2022-12-24T15:53:41.927

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

score 0 · Answer 4 · answered Dec 24 '22 at 15:56

0

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>

answered Dec 24 '22 at 15:56

Ronnie Royston

16,778
6
77
91

How do I change element size based on screen size?

4 Answers4