How do I make my input field width and height Responsive?

#1

Hi guys, I need help. How do I make my input filed responsive and at the same time fixed location. Currently what I’ve done is the input filed which is type=“email” is in fixed position and it was responsive in width but not in height. I have my main background outside the ionic-content while the input field is inside of it. I want to follow the specific location of the input field attached to the background making it responsive in both side. Btw I don’t have any problem in my backgound. He’s my code:

<body ng-app="starter"><ion-pane>
      <div class="row">
        <div class="col col-top " id="inceptionImg">
          <img src="img/inceptionAndRunawayBride.png" width=82% height=48% />
        </div>
        <div class="col col-center" id="book">
          <img src="img/book.png" width=85% height=86% />
        </div>
        <div class="col col-top" id="threeDGlass">
          <img src="img/3d.png" width=63% height=18% />
        </div>
      </div>
      <div clas="row row-center">
        <div class="col col-center" id="roseAndJack">
          <img src="img/roseAndJack.png" width=65% height=37% />
        </div>
      </div>
      <div class="row row-bottom">
        <div class="col col-bottom" id="circleIcon">
          <img src="img/circleIcon.png" width=40% height=20% />
        </div>
        <div class="col col-bottom" id="popcorn">
          <img src="img/popcorn.png" width=60% height=45% />
        </div>
      </div>

      <ion-content>
        <div class="list list-inset">
          <label class="item item-input">
            <input type="email" placeholder="email" width=30% height=40%>
          </label>
          <label class="item item-input">
            <input type="text" placeholder="Last Name" width=30% height=40%>
          </label>
        </div>

        
      </ion-content>
    </ion-pane>
  </body>

Here’s my css:

.pane,.view {background-color: #FCBD4E;}

#inceptionImg {
float:left;
position: fixed;
top: -13.5%;
left: -23%;
margin: 0px;
padding: 0px;
z-index: 1;
}

#inceptionImg img {position: fixed;}

#threeDGlass {
float: right;
position: fixed;
top: -5%;
right: -49.5%;
margin: 0px;
padding: 0px;
z-index: 3;
}

#threeDGlass img {position: fixed;}

#book {
float: top;
position: fixed;
top: 6%;
left: 8.5%;
margin: 0px;
padding: 0px;
z-index: 2;
}

#book img {position: fixed;}

#roseAndJack {
float: right;
position: fixed;
top: 20%;
left: 78%;
margin: 0px;
padding: 0px;
z-index: 1;
}

#roseAndJack img { position: fixed; }

#circleIcon {
float: top;
position: fixed;
top: 76%;
left: -16%;
margin: 0px;
padding: 0px;
z-index: 3;
}
#circleIcon img { position: fixed; }

#popcorn {
float: bottom;
position: fixed;
top: 84%;
left: 59.5%;
margin: 0px;
padding: 0px;
z-index: 3;
}

#popcorn img { position: fixed; }

ion-content {
z-index: 4;
}