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 >
  <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>

CodePudding user response：

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 >
  <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;
    ...
  }

CodePudding user response：

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 >
<div >
 
  <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>

CodePudding user response：

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

#search-bar {
  flex: 1.5;
}

#search-button {
  flex: 1;
}

.header form {
  flex: 1;
}