How can I limit the expanding of my input?

I have a label and an input in a div.
this div is a grid.
the width of my input is set to 100%.

Currently on a desktop display my input expands all across the display.
It fits nicely on a mobile version but I don’t like how it looks on a desktop display.
So I’d like to limit the maximum expandable length of my input.
How can I achieve that?
I tried using min, max, minmax and etc but I couldn’t figure it out.

My html:

<form>
    <div class="input-container">
      <label>
      <input>
    </div>
 </form>

My css:

.input-container {
    border-radius: 16px;
    padding: 1rem;
    display: grid;
    gap: 5px;
}

input {
width: 100%;
}

Thanks for your answer.

>Solution :

Here you go bro, a simple solution of margin: 0 auto; this will center it and you can change your desired width.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .input-container {
      border-radius: 16px;
      padding: 1rem;
      display: grid;
      gap: 5px;
    }

    input {
      width: 100%;
    }

    @media only screen and (min-width: 600px) {
      input {
        width: 60%;
        margin: 0 auto;
      }
    }
  </style>
</head>

<body>
  <form>
    <div class="input-container">
      <label></label>
      <input />
    </div>
  </form>
</body>

</html>

Also change media queries for targeted screens.

Leave a Reply