Why is the input field getting cut off when I resize my browser window, even though I'm using percentages? Here is a screenshot for reference: https://i.sstatic.net/4JrWd.png Shouldn't it resize automatically with percentages? Thank you!
Below is my CSS code:
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.bar-manager {
width: 100%;
}
...
And here is my HTML code:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div class="bar-manager">
<div class="top-bar">
<p>Homepage</p>
<div class="user-search-input-field">
<form action="Login.php" method="POST">
<input type="text" name="userPost" placeholder="Search users..." required>
<i class = "fa fa-search" aria-hidden = "true"></i>
</form>
</div>
</div>
<div class="bottom-bar">
<div class="bottom-bar-texts">
<div><h1>Welcome, Omard2000</h1></div>
<div><p>Administrator</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you!