Make input box width smaller when browser is zoomed with css only

Question

I want to make my input box width get smaller something more like reduced width, when the browser is zoomed out, and wider when the browser is zoomed in, cause my content is overlapping.

When i zoom out my content starts to overlap. The first image is 100% percent zoom, browser default.

When I zoom to 110%

When i zoom to 125%

How do I make the search bar reduce on zoom out 100% - 110%, and make it increase on zoom in 125% zoom -> 100% zoom

What I have tried.

<div class="example-navigation-bar-two">
   <input type="text" class="example-navigation-bar-two-input"   placeholder="Search any food item on Example...">
</div>

AND my css

.example-navigation-bar-two{
  width:68%;    
}   
.example-navigation-bar-two-input{
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  float: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  border-left:0px;
  border-right:0px;
  background-repeat: repeat-x;
  white-space: nowrap;
  padding-top:3px;
  padding-left:5px;
  padding-right:5px;
  width:100%;
  height:31.2px;
}

LOGIN/REGISTER HTML

<div class="sharyor-navigation-bar-two">
  <div class="sharyor-hundred-percent">
    
    <div class="sharyor-right-one">
      <a href="">
        <div><i class="fa fa-user-o"></i></div>
        <span>Login/Register</span>
      </a>
    </div>
    
    <div class="sharyor-right-two">
      <a href="">
        <div><i class="fa fa-heart-o"></i></div>
        <span>Wish to buy</span>
      </a>
    </div>
    
    <div class="sharyor-right-three">
      <a href="">
        <div><i class="fa fa-shopping-basket"></i></div>
        <span>Cart</span>
      </a>
    </div>
    
  </div>
</div>

LOGIN/REGISTER CSS

.sharyor-navigation-bar-two{
  z-index:1000;
  right:0;
  margin-right:15px;  
  display:flex;
  position:absolute;
}
.sharyor-hundred-percent{
  width:100%;
  position:relative;
  display:flex;
}
.sharyor-right-one{
  padding-right:20px; 
}
.sharyor-right-two{
  padding-right:20px; 
}
.sharyor-right-three{
  padding-right:15px; 
}

Answer 1

Since your login/register styling has no relative sizes, you can use @media to change the size based on the size of the viewport. This will work disregarding the maximum viewport size.

@media screen and (width < 800px){
   .example-navigation-bar-two-input{
       /* change size here */
   }
}