JavaScript button not resizing on mobile correctly

user_16310130 0
Viewed 33

I am creating a search bar in my HTML and I am trying to put a magnifying glass button at its end. It looks fine on desktop, but on mobile the button is taller than the search bar. Much thanks if you know how to get it to be the same height on every viewport.

.autocomplete {
  position: absolute;
  top: 50%;
  left: 15%;
}

button[type=reset] {
  background-color: #34587F;
  color: #fff;
  position: absolute;
  border: 0;
  font-size: 2vw;
  border-radius: 10%;
  width: 20%;
  height: 100%;
}
<div class="autocomplete" style="width:40%; font-family: 'Fjalla One'">
  <input id="searchField" type="text" name="search" placeholder="SEARCH" />
  <button type="reset" id="submit" onclick="goTo();"><i class="bi bi-search"></i> 
       </button>
</div>

Appearance on desktop

Appearance on mobile

css html javascript
1 Answers

It looks like you're setting the height of the reset to height: 100% for the parent autocomplete div. Make sure that you're also setting the height of the input/searchField to the same height (i.e. 100%) to match that of the reset button. If they're styled the same, make sure you set a height for the autocomplete class. Having an unset height for an absolutely positioned parent, with relative height children, may be causing your issues.

user_121099580
Related