Input field not adjusting to desired width-CodePudding

I am trying to make the search bar in the top right container responsive so that it shrinks down enough to so that its not being overlapped by the other icons, like this:

What is happening when I have the window set to 600px

I am using media queries and css variables to make the site responsive.

So far I have tried to:

Set a max-width with a hard pixel value for the input field with type text using css variables.
Change the widths of all of the items in that row by hard coding it then using css variables.
Added a margin-right to the text input field (which worked, but seemed wrong as in the "background" the icons are still overlapping the text field).

Would greatly appreciate any solutions to this problem.

What I want the search bar row to look like for all window sizes.

PS. I know that the icons aren't loading, but I couldn't find a way to add them, but when I ran the code snippet on stackoverflow the output was still the same as what I'm seeing, just without the icons.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/*---------------MEDIA QUERIES-----------------*/
@media screen and (max-width: 360px) {
    :root {
        --sidebar_heading: 20px;
        --sidebar_sub_heading: 15px;
        --container_padding: 15px;
        --header_height: 16.5vh;
        --content_height: 83.5vh;
        --search_max_width: 100px;
        --bg: orange;
    }
    .home:hover, .profile:hover, .messages:hover, .history:hover, .tasks:hover, .settings:hover, .support:hover {
        font-size: 30px;
    }
}

@media screen and (max-width: 375px) and (min-width: 360px) {
    :root {
        --sidebar_heading: 25px;
        --sidebar_sub_heading: 17.5px;
        --container_padding: 12.5px;
        --header_height: 17.5vh;
        --content_height: 82.5vh;
        --search_max_width: 170px;
        --bg: orange;
    }
    .home:hover, .profile:hover, .messages:hover, .history:hover, .tasks:hover, .settings:hover, .support:hover {
        font-size: 30px;
    }
} 

@media screen and (max-width: 720px) and (min-width: 375px) {
    :root {
        --sidebar_heading: 30px;
        --sidebar_sub_heading: 20px;
        --container_padding: 15px;
        --header_height: 17.5vh;
        --content_height: 82.5vh;
        --search-max-width: 770px;
        --bg: orange;
    }
    .home:hover, .profile:hover, .messages:hover, .history:hover, .tasks:hover, .settings:hover, .support:hover {
        font-size: 30px;
    }
}

@media screen and (max-width: 1366px) and (min-width: 720px) {
    :root {
        --sidebar_heading: 35px;
        --sidebar_sub_heading: 22.5px;
        --container_padding: 17.5px;
        --header_height: 17.5vh;
        --content_height: 82.5vh;
        --bg: orange;
    }
    .home:hover, .profile:hover, .messages:hover, .history:hover, .tasks:hover, .settings:hover, .support:hover {
        font-size: 30px;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1366px) {
    :root {
        --sidebar_heading: 40px;
        --sidebar_sub_heading: 25px;
        --container_padding: 20px;
        --header_height: 17.5vh;
        --content_height: 82.5vh;
        --bg: black;
    }
    .home:hover, .profile:hover, .messages:hover, .history:hover, .tasks:hover, .settings:hover, .support:hover {
        font-size: 30px;
    }
}

@media screen and (max-width: 2300px) and (min-width: 1920px) {
    :root {
        --sidebar_heading: 45px;
        --sidebar_sub_heading: 27.5px;
        --container_padding: 22.5px;
        --header_height: 11.5vh;
        --content_height: 88.5vh;
        --bg: black;
    }
    .home:hover, .profile:hover, .messages:hover, .history:hover, .tasks:hover, .settings:hover, .support:hover {
        font-size: 30px;
    }
}

@media screen and (min-width: 2300px) {
    :root {
        --sidebar_heading: 50px;
        --sidebar_sub_heading: 30px;
        --container_padding: 25px;
        --header_height: 12.5vh;
        --content_height: 87.5vh;
        --bg: black;
    }
    .home:hover, .profile:hover, .messages:hover, .history:hover, .tasks:hover, .settings:hover, .support:hover {
        font-size: 35px;
    }
}

/*---------------MAIN CONTAINERS-----------------*/
.container {
    display: grid;
    grid-template: var(--header_height) var(--content_height)/ min-content auto;
    background-color: var(--bg);
}

.sidebar-container {
    grid-column: 1/2;
    grid-row: 1/3;
    background-color: #1e3a8a;
    color: white;
}

.header-container {
    grid-column: 2/3;
    grid-row: 1/2;
    background-color: #cffafe;

}

.content-container {
    grid-column: 2/3;
    grid-row: 2/3;
    background-color: white;
    background-repeat: no-repeat;
    background-image: url(./images/wave.svg);
    background-position: 0% 100%;
    background-attachment: fixed;
}
.sidebar-container, .header-container, .content-container {
    padding: var(--container_padding);
}

/*---------------SIDEBAR STYLING-----------------*/
.row, .header-row-space-between, .header-row-end {
    display: flex;
    align-items: center;
    gap: 0 10px;
}

.row {
    width: 100%;
}

.header-row-space-between {
    width: 80%;
    justify-content: space-between;
}

.header-row-end {
    width: 20%;
    justify-content: end;
    gap: 0 40px;
}

.column {
    display: flex;
    flex-direction: column;
}

.heading {
    font-size: var(--sidebar_heading);
    padding-bottom: 25px;
    font-weight: 800;
    transition: all 0.2s ease-in-out;

}

.sub-heading {
    padding: 7.5px 0;
}

.settings {
    padding-top: 30px;
}

.sub-heading, .settings {
    font-size: var(--sidebar_sub_heading);
    font-weight: 100;
    transition: all 0.2s ease-in-out;
}

.sidebar-margin {
    margin-left: 10px;;
}

.image {
    width: 1em;
    height: 1em;
}


.box {
    height: 100%;
    width: 100%;
    background-color: blanchedalmond;
}
form {
    width: 100%;
}
input[type='text'] {
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    max-width: var(--search_max_width);
    width: 100%;
}
/*-----COLORS---------
    sidebar: #1e3a8a
    header: #cffafe
    content: #ecfeff
*/

<!DOCTYPE html>

<html>
  <head>
    <title>Admin Dashboard</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div >
      <div >
        <div >
          <img  src="./images/icon.svg" />
          <div >Dashboard</div>
        </div>
        <div >
          <img  src="./images/home.svg" />
          <div >Home</div>
        </div>
        <div >
          <img  src="./images/profile.svg" />
          <div >Profile</div>
        </div>
        <div >
          <img  src="./images/message.svg" />
          <div >Messages</div>
        </div>
        <div >
          <img  src="./images/history.svg" />
          <div >History</div>
        </div>
        <div >
          <img  src="./images/task.svg" />
          <div >Tasks</div>
        </div>
        <div >
          <img  src="./images/settings.svg" />
          <div >Settings</div>
        </div>
        <div >
          <img  src="./images/support.svg" />
          <div >Support</div>
        </div>
      </div>

      <div >
        <div >
          <div >
            <img  src="./images/search.svg" />
            <form action="">
              <input type="text" placeholder="Search..." />
            </form>
          </div>
          <div >
            <img  src="./images/notification.svg" />
            <img  src="./images/person-profile.svg" />
            Hasin Mahmood
          </div>
        </div>
      </div>

      <div >
        <div ></div>
      </div>
    </div>
    <script src="" async defer></script>
  </body>
</html>

CodePudding user response：

Personally, I think this would much easier to achieve without @media queries, using display: grid instead. Designing around so many width breakpoints can get really hairy, esp. when there is a more elegant solution.

For example:

*{
  font-size: 3vmin;
}
header{
  display: grid;
  grid-template:  1fr / 1fr 2fr 1fr 1fr 1fr;
}
h3{
  align-self: center;
  justify-self: center;
}

<header>
  <button>search</button>
  <input type="search"/>
  <button>icon</button>
  <button>icon 2</button>
  <h3>name here</h3>
</header>

By setting the sizes of the grid to fractional units, you will never have* elements overlapping one another, and will instead get overflow-x if the viewport becomes too small to display them all simultaneously.

To remedy the overflow issue, you then make the size of the elements inside of the grid relative to the viewport. For my example, I achieved this by setting the font-size to 3vmin. However, you can instead use this for the size of the icons, the input box, whatever you want. If you desire, you can also set a minimum height to the grid itself, so that it retains its proportion relative to the rest of your document.

The other benefit of using grid in this case is that you will get reliable behavior out of justify-self and align-self, where you might not from the children of a flexbox.