CSS Search Bar Not Responsive

Admin 1
Viewed 496

I'm making a responsive GitHub Homepage Clone (https://github.com/) with HTML and CSS before moving on to JS. I'm currently working on a search bar. However, when I narrow the screen from the left side, the search bar width stays the same, causing the search bar to leave the entire left navigation bar. Any help would be greatly appreciated :) P.S. Please view the code snippet at full page view

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f6f8fa;
    font-family: Helvetica, sans-serif;
}

#left-menu {
    background-color: white;
    width: 25%;
    display: flex;
    flex-direction: column;    
}

#left-menu-items {
    margin: 40px 15px 300px 25px;
    width: 85%;
}

#left-menu input {
    background-color: transparent;
    border: solid 1px #e1e4e8;
    border-radius: 5px;
    outline: none;
    margin-bottom: 20px;
    padding: 8px 113px 8px 10px;
}

#left-menu input::placeholder {
    color: #d2d5d8;
    font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/735c9ee1fa.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>GitHub Homepage</title>
</head>
<body>
    <section id="left-menu">
        <div id="left-menu-items">
            <input type="search" placeholder="Find a repository...">
        </div>
    </section>
</body>
</html>

flexbox css html
2 Answers

The element I'm working on is the search bar that says "Find a repository..." In order to allow the box to stretch to the right, I've added a ton of padding.

Hi, Joshua.

In this case, asking a question with so many parts is hard to answer. If you can create a smaller example - it might help.

<aside class="sidebar">
  <input type="search" placeholder="Find  a repository">
</aside>

.

.sidebar {
  border: 1px solid blue;
  padding: 10px;
}

input[type='search'] {
  padding: 5px 10px;
  font-style: innherit;
}

https://jsfiddle.net/sheriffderek/smnovwqj/

From there - we can help you. You can always ask in the CSS Discord too.

HERE: with the sidebar in tact: https://jsfiddle.net/sheriffderek/e6k8gydu/

user_13994560

Presumably you want the search input to shrink and grow with the page.

To that end, you should use max-width: 300px along with flex-grow: 1 on the <input>.

flex-grow tells the flex-box how to allocate space along its main axis (in this case, the X axis). The value you give it represents a fraction of the parent flex-box. So in this case, if give it the value flex-grow: 1 it will take up as much space as it can, until it runs into another fixed with element, or another element that also has flex-grow set with a nonzero value.

Max-width simply tells the element how large it's allowed to get. You can obviously fine tune this by changing the value, but 300px seemed about right to me.

Put the two together and you no longer need your crazy padding. The input will shrink all the way down to nothing (if you want that to change you also add the min-width property) and grow all the way up to 300px in this case.

You'll also also want to get rid of the <p> next to your text input. In this scenario, there's no reason at all to use a paragraph, as it has default styling that changes how it behaves. I would use a <div> instead.

After that I would get rid of the relative positioning on nav div p{} and just let flex-box do its magic. If you're trying to position an element in that way, a much better way is with margin. This is what margin is meant to be used for.

Sorry my answer isn't a more specific, but your question is a bit broad.

user_80506680
Related