CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
BoogleDoogle
BoogleDoogle

Reputation: 47

White space when I resize browser html document

I am using bootstrap to create a simple webpage, here I have the photo of the webpage when it's full desktop width

https://i.sstatic.net/acTR5.jpg

As I like it, it covers the entire page.

But when I resize Chrome to a smaller width, theres some white space at bottom, and I dont know why?

https://i.sstatic.net/z8uNW.jpg

Whats even worse is that I do developer tools, and see that html only covers my div, so why is there extra space ?

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}
/* SECTIONS */

section {
  padding-top: 2%;
  padding-bottom: 2%;
}
.main {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
  /* bottom, image */
  url(img/background.jpg);
  background-size: cover;
  padding-bottom: 56.25%;
  background-attachment: fixed;
}
.no-padding {
  padding: 0;
}
/* HEADINGS */

.welcome-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
}
.welcome-area h1 {
  font-size: 500%;
}
<section class="main">
  <div class="welcome-area">
    <h1>Hello.</h1>
    <div class="row text-center btn-main">
      <button type="button" class="btn btn-primary btn-explore">EXPLORE</button>

    </div>
    <div class="row">
      <img src="css/img/face.jpg" alt="face" class="img-responsive img-face">
    </div>



  </div>
</section>

Upvotes: 1

Views: 2354

Answers (2)

Joint
Joint

Reputation: 1218

Please add height: 100% to your css code for html, body and then add height: 100%; box-sizing: border-box; for element section.

Edit: and for the better effect you can remove padding-bottom for .main element.

Upvotes: 1

red security
red security

Reputation: 303

try adding this to your css:

html, body{
    width:100%;
    height:100%
}

this stretches the page to fill the whole page in width and heigh

Upvotes: 1

Related Questions