Responsive search box, increase instead of overlapping

user_19566884 0
Viewed 30

How can I make the search bar smaller instead of letting it overlap with the logo image or to make it width bigger when increasing the screen size? At the moment it stays the same size at any screen I make.

My CSS:

  .header {
    display: flex;
    flex-direction: row;
    padding-top: 20px;
    padding-left: 10px;
    background: white;
  }

  .header h1 {
      font-size: 30px;
      padding-right: 10px;
      width: 30%;
  }

  #search-bar {
      width: 60%;
      height: 40px;
      font-size: 1rem;
      border: 1px solid #D0CFCE;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
  }

  #search-button {
      height: 40px;
      font-size: 1rem;
      border: 1px solid #D0CFCE;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
  }

  .header form {
    display: flex;
    justify-content: center;
    align-items: center;
  }

My HTML:

<div class="header">
  <h1>
    <a href="home"><img src="" alt="Company Logo"></a>
  </h1>

  <form action="search">
    <input type="text" id="search-bar" placeholder="Search anything...">
    <button type="submit" id="search-button">Search</button>
  </form>
</div>
css
3 Answers

You could try something like this:

.header {
    display: flex;
    flex-direction: row;
    padding-top: 20px;
    padding-left: 10px;
    background: white;
    max-width: 100%;
    gap: 10px;
  }

  .header h1 {
      font-size: 30px;
  }
  #search-bar {
      width: 10px;
      flex: 1;
      height: 40px;
      font-size: 1rem;
      border: 1px solid #D0CFCE;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
  }

  #search-button {
      height: 40px;
      font-size: 1rem;
      border: 1px solid #D0CFCE;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
  }

  .header form {
    display: flex;
    flex: 400px;
    justify-content: center;
    align-items: center;
  }
<div class="header">
  <h1>
    <a href="home"><img src="" alt="Company Logo"></a>
  </h1>

  <form action="search" id="form">
    <input type="text" id="search-bar" placeholder="Search anything...">
    <button type="submit" id="search-button">Search</button>
  </form>
</div>

We set a max-width on the header so it doesn't get wider than the screen:

.header {
   max-width: 100%;
   ...
}

We also give search-bar a flex:1 and width:10px so that it will grow when it has room, but doesn't get smaller than 10px wide:

#search-bar {
      width: 10px;
      flex: 1;
      ...
  }

We also give the form a flex: 400px so that it can grow when it has room:

.header form {
    display: flex;
    flex: 400px;
    ...
  }
user_153516400

use vw instead of giving fixed width checkout this code

  .header {
    padding-top: 20px;
    padding-left: 10px;
    background: white;
  }

  .header h1 {
      font-size: 30px;
      padding-right: 10px;
      display:block;
  }

  #search-bar {
      width: 60vw;
      min-width:200px;
      height: 40px;
      font-size: 1rem;
      border: 1px solid #D0CFCE;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
  }

  #search-button {
      height: 40px;
      font-size: 1rem;
      border: 1px solid #D0CFCE;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
  }

  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
  }
  
 
  form{
    display:flex; 
  }
<div class="header">
<div class="wrapper">
 
  <h1>
    <a href="home"><img src="" alt="Company Logo"></a>
  </h1>

  <form action="search">
    <input type="text" id="search-bar" placeholder="Search anything...">
    <button type="submit" id="search-button">Search</button>
  </form>
  </div>
</div>

user_190516270

delete width: 60%; from #search-bar and add this:

#search-bar {
  flex: 1.5;
}

#search-button {
  flex: 1;
}

.header form {
  flex: 1;
}
user_92368920
Related