I have been working on making the search bar in the top right container responsive so that it shrinks down enough to prevent overlap with other icons. Here is an example of what I am trying to achieve:
Image showing issue at 600px window size
To achieve this, I am utilizing media queries and CSS variables for a responsive design.
My attempts so far include:
- Setting a max-width with a specific pixel value for the input field using CSS variables
- Adjusting the widths of all items in the row manually and then applying CSS variables
- Adding a margin-right to the text input field (which solved the overlapping issue but doesn't feel like the right approach as the icons still interfere with the text field)
Any suggestions or solutions to this problem would be greatly appreciated.
Desired look of the search bar row for all window sizes
PS. Note that the icons may not load, however, when testing the code snippet on Stack Overflow, the layout remained consistent 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;
}
}
...
{/* Styling information omitted */}
...
<!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 class="container">
<div class="sidebar-container">
...
{/* Sidebar details omitted */}
</div>
<div class="header-container">
...
{/* Header details omitted */}
</div>
<div class="content-container">
<div class="box"></div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>