CODEWITHSUNDEEP
htmlcss
Maisara
Maisara

Reputation: 3

there is an empty space next to the banner

https://ibb.co/tL337vV

Look closely at the top right corner of the page you will see there is an empty space that I can't get rid of. this only appears on actual phones and tablets not on desktop even if squeeze the browser.

            <div class="banner">
            <div class="banner-content">
                <div class="banner-text">
                    <h1 class="welcoming"></h1>
                </div>
            </div>
        </div>

*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
  }
  html, body {
    margin: 0;
  }
body {
     background-color: rgb(255, 253, 250);
 }
/*header*/
.banner {
    background-color: rgb(153, 217, 234);
    max-height: 200px; 
}
.banner-content {
  padding: 20px;
  align-items: center;
}
.banner-text {
  flex-grow: 1;
  line-height: 1.4;
}
.welcoming {
    color: aliceblue;
    text-align: center;
    font-weight: bold;
    font-size: 120px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
    text-transform: uppercase;
}

also you can see that the search bar isn't aligned properly, any suggestions?

 <div class="wrapper">
            <div class="search-input">
                <a href="" target="_blank" hidden></a>
                <input type="text" class="search-box" placeholder="Pick a topic, person, something">
                <div class="autocom-box">
                    <!-- here list are inserted from javascript -->
                </div>
                <div class="icon"><i class="fas fa-search"></i></div>
            </div>
        </div> 

.wrapper{
    max-width: 810px;
    margin: 150px auto;
  }

.wrapper .search-input {
    text-align: center;
    margin: 15px;
}

  .wrapper .search-input{
    background: #fff;
    width: 100%;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
    font-family: 'Poppins', sans-serif;
  }

Upvotes: 0

Views: 43

Answers (2)

Parit Sawjani
Parit Sawjani

Reputation: 908

Remove width: 100%; from your .wrapper .search-input class

Edit: I'm assuming you wanted to target your input field when applying the width: 100%;, so you could add this to your CSS:

.wrapper .search-box {
    width: 100%;
}

Upvotes: 0

FenNek55
FenNek55

Reputation: 11

Looks like something is causing an overflow on the page. One trick that I often use in such situation is going into dev tools and adding this style rule:

* {
    background-color: rgba(2,2,240, 0.1) !important;
}

It lets you see every elements position and check which one is causing an overflow

Upvotes: 1

Related Questions