CODEWITHSUNDEEP
cssresponsive-design
yetetatuh
yetetatuh

Reputation: 61

How to make this input text field responsive

Open in full window and resize the window the input field is not responsive so the button moves below the input which is not what i want.

.coupon {
  width: 100%;
  max-width: 500px;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 22px;
}
.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 7px 20px 7px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
    font-size:0.875;
  max-width: 100%;
}
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>

Upvotes: 0

Views: 1269

Answers (5)

nazifa rashid
nazifa rashid

Reputation: 1504

* {
  margin: 0; 
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 80% 20%;
  justify-content: center;
  align-items: center;
}

.coupon {
  width: 100%;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  padding: 8px 0;
}

.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 10px 20px 10px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
    font-size:0.875;
  max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <input type="text" class="coupon input-res">
  <button class="coupon-btn">Apply</button>
</div>
</body>
</html>

Wrap the elements into a .container and use display: grid

You can give column width to on the container as you want it to be! I have used percentage, instead you can use pixel.

For reference go through this link https://www.w3schools.com/css/css_grid.asp

Hope it'll solve your problem

Upvotes: 0

Thangapandi
Thangapandi

Reputation: 216

You Must Learn @media contents https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

otherwise, use Bootstrap https://www.w3schools.com/bootstrap4/

The easy way is to use bootstrap.

Upvotes: 0

shivetay
shivetay

Reputation: 354

try adding some mediaqueries

 @media(max-width: 37em){
  .coupon{width: 50%;}
}

Upvotes: 0

Ranjith v
Ranjith v

Reputation: 1062

Try like this

.flex-col {
  display: flex;
  display: -webkit-flex;
}

.coupon {
  width: 100%;
  max-width: 500px;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 30px;
}

.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 7px 20px 7px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
  font-size: 0.875;
  max-width: 100%;
}
<div class="flex-col">
  <input type="text" class="coupon input-res">
  <button class="coupon-btn">Apply</button>
</div>

Upvotes: 1

Sumit Patel
Sumit Patel

Reputation: 4638

try with width: calc(100% - 86px);.

.coupon {
  width: calc(100% - 86px);
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 22px;
}
.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 7px 20px 7px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
    font-size:0.875;
}
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>

Upvotes: 1

Related Questions