Question 184070 in Html Question posted in
Some basic documentation can be found here.

Issue with widening search bar in HTML/CSS #html

I’m having trouble widening a search bar in my HTML/CSS code. I have tried adjusting the width property of the .search-bar class, but it doesn’t seem to have any effect. I would appreciate some guidance on how to resolve this issue.
here is the code :
`

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <style>
            .search-button,.I-am-Feeling-Lucky
            {
                background-color: rgb(248,249,250);
                border: 1px solid rgb(248,249,250);
                border-radius: 4px;
                color: rgb(60 64 67);
                font-family: arial,sans-serif;
                font-size: 14px;
                margin: 11px 4px;
                padding: 0 16px;
                line-height: 27px;
                height: 36px;
                min-width: 54px;
                text-align: center;
                cursor: pointer;
                user-select: none;
                white-space: nowrap;
            }
            .search-bar
            {
                border: 1px solid rgb(206 212 218);
                font-size: 16px;
                padding: 20px;
                width: 100%;
                border-radius: 20px;
            }
            .Search-Bar-Section
            {
                display: flex;
                width: 100%;
                max-width: 800px;
            }
            .Lower-Section
            {
                width: 100%;
                height: 80vh;
                display: flex;
                position: relative;
                justify-content: center;
                align-items:center;
                flex-direction: column;

            }

        </style>
    </head>
    <body>       
        <div class = "Header">
            header
        </div>
        <div class = "Lower-Section">

            <div>
                <img src="photosgooglepng.png" alt ="Google">
            </div>

            <div>
                <form action="https://www.google.com/search">
                    <div class = "Search-Bar-Section">
                        <input class = "search-bar" type="text" name="q">
                    </div>
                    <div>
                        <button class = "search-button" type="submit">Google Search</button>
                        <button class = "I-am-Feeling-Lucky" type="submit" name="btnI">I am Feeling Lucky</button>
                    </div>
                </form>
            </div>

        </div>
    </body>
</html>

Could someone please help me understand why the width property isn’t working in this case?

enter image description here

I have tried adjusting the width property of the .search-bar class to make the search bar wider, but it doesn’t seem to have any effect. I also tried using the !important declaration, but that didn’t work either.

Tags:

2

Answers


  1. 0

    There is a div before form section that you did not use width:100% on it. Give it width:100%; and it will be fixed.

    I suggest you delete the div before your form section because

    1. It’s not necessary to use it
    2. You can’t center your form
      Then use this styles for "form"
        form {
        display:flex;
        flex-direction: column;
        width:100%;
        align-items: center;
    }
    Login or Signup to reply.
  2. 0

    You just have to specify the width of the search bar class i.e.

    .Search-Bar-Section

    for e.g.

    .Search-Bar-Section
            {
                display: flex;
                width: 800px;
                 
            }

    And btw there is no need of so much divs. I would appreciate @Arman Moalemi and @raiyan22 for giving the simple and clean way to center a form elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search