CODEWITHSUNDEEP
htmlcssbutton
VladJ
VladJ

Reputation: 117

Modifying button size according to user's resolution

How can I make a button maintain it's size on different screen resolutions? I tried using '%' but it has only worked with divs so far.

.button{
        width:x;
        height:y;
       }

What values should x and y have so the button modifies according to screen resolution?

Upvotes: 0

Views: 1463

Answers (2)

Persijn
Persijn

Reputation: 14990

Adding the view port sizes vw or vh will set the buttons to there browser size. So if the browser is fullscreen it will be aproximatly to there resolution

button {
  width: 10vw;
  height: 10vh;
}
body {
  height: 100vh;
}
<button>Create</button>

Upvotes: 1

leopold
leopold

Reputation: 2061

Try using Padding like so and place it inline

.button
{

display:inline-block;
padding: 2%;

}

If you want to increase the height, play with line-height attributes like so 

.button
{

line-height: 1.5rem;
display:inline-block;
padding: 2%;

}

Upvotes: 0

Related Questions