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

Extra white space overflowing the page when i adjust the width of my page. (CSS,HTML)

When i adjust my screen size to a smaller view, such as a phone view, there is this weird white box that appears underneath, it gets even longer the smaller i make the width. Does anyone know what could be causing this? I provided all of the css and html for this page.

Using the pesticide chrome extension, i can see that the white space is an HTML element. Im not sure if that helps. Also here is a screen shot of the white space i am referring to.

White Box

html {
  height: 100%;
}

.websiteNav {
  width: 100%;
  height: 20%;
  background-color: hsla(0, 0%, 100%, 0.801);
  z-index: 1;
}

.websiteNavOptions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 80%;
  font-family: 'Quicksand', sans-serif;
  gap: 5%;
}

.logo {
  font-size: 3vw;
  margin-left: 5%;
  font-weight: 700;
}

.homeitem {
  margin-left: 2%;
  font-size: 2vw;
}

.reviewbutton {
  margin-top: 0.5%;
  margin-left: 40vw;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

h1 {
  font-family: 'Quicksand', sans-serif;
  padding: 3%;
  font-size: 3vw;
}

p {
  font-family: 'Quicksand', sans-serif;
  padding: 3%;
  font-size: 2vw;
}

.container {
  display: flex;
  justify-content: center;
  height: 150%;
  width: 100%;
  background-image: url(/images/6398749.png);
  background-position: center;
  background-size: cover;
}

.white-rectangle {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: #ffffff;
  max-width: 40%;
  height: 150%;
}

.userInfo {
  font-size: 1.2vw;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin-left: 5%;
  gap: 1em;
  font-family: 'Quicksand', sans-serif;
}

#userNameTextBox {
  width: 60%;
  font-size: 1.5vw;
  font-family: 'Quicksand', sans-serif;
}

#schoolNameTextBox {
  width: 59%;
  font-size: 1.5vw;
  font-family: 'Quicksand', sans-serif;
}

.userNameGroup {
  display: flex;
  gap: 1vw;
}

.schooNameGroup {
  display: flex;
  gap: 1vw;
}

.Questions {
  font-family: 'Quicksand', sans-serif;
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding: 5%;
  font-size: 1vw;
}

.option {
  width: 100%;
  height: 50%;
  margin: 3%;
  margin-left: 10%;
  padding: 2%;
  display: flex;
  align-items: center;
  font-size: 1.5vw;
  position: relative;
  max-width: 90%;
}

.option input {
  display: none;
}

.option label {
  cursor: pointer;
  margin-left: 5%;
}

.option label::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 30%;
  width: 5%;
  height: 50%;
  border: .17vw solid black;
  border-radius: 50%;
  box-shadow: 0 0 0.10vw rgba(0, 0, 0, 0.8);
}

.option label::before {
  content: "";
  position: absolute;
  right: 101%;
  top: 40%;
  width: 4%;
  height: 40%;
  background-color: rgb(76, 76, 160);
  border-radius: 50%;
  box-shadow: 0 0 0.10vw rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.4s;
}

.option input:checked~label::before {
  opacity: 1;
}

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

.button {
  display: inline-block;
  text-decoration: none;
  padding: 0.76vw 4vw;
  color: white;
  background-image: linear-gradient(45deg, rgb(124, 238, 200), rgb(45, 126, 99));
  font-size: .80vw;
  border-radius: 30px;
}

.bottombutton {
  display: flex;
  justify-content: flex-end
}

.bottom {
  margin-right: 20%;
  border: 0;
}

.review {
  width: 100%;
}

.finishbottombutton {
  display: flex;
  justify-content: center;
}

.matchcontainer {
  display: flex;
  justify-content: center;
  margin-top: 5%;
  font-size: 20px;
}

.matchbackground {
  background-color: rgb(255, 255, 255);
  border-radius: 10%;
  height: 80vh;
  width: 70%;
  max-width: 1200px;
  min-height: 750px;
}

.matchcontent {
  display: flex;
  flex-direction: column;
  height: 50vh;
  align-items: center;
  justify-content: center;
}

#studentImage {
  width: 45%;
  height: 40%;
  margin: 10px;
  object-fit: contain;
  margin-bottom: 20px;
}

.imgAndContact {
  display: flex;
  justify-content: center;
  gap: 3vh;
}

.matchTextContent {
  display: flex;
  flex-direction: column;
  font-size: 1.5vw;
}

#congratsmessage {
  font-size: 3vw;
  font-weight: 700;
}

#student {
  font-size: 5vw;
  font-weight: 200;
  margin: 2%;
  letter-spacing: 2vw;
}

#datatest {
  font-size: 2vw;
  ;
  word-spacing: 3vw;
}


}
<nav class="websiteNav">
  <ul class="websiteNavOptions">
    <li class="logo"><a href="https://www.mydorm.com/">myDORM</a></li>
    <li class="homeitem"><a href="https://www.mydorm.com/" class="homelink">Home</a></li>
    <li class="reviewbutton"><a href="https://www.mydorm.com/colleges/dorm/photo/" class="button review">Leave a Review!</a></li>
  </ul>
</nav>


<div class="container">

  <div class="white-rectangle">

    <h1>Complete Survey Below </h1>
    <p> The survey below is calibrated with our state of the art technology that picks the perfect roommate 100% of the time.</p>

    <div class="userInfo">

      <div class="serNameGroup">
        <label for="userNameTextBox">Name:</label>
        <input type="text" id="userNameTextBox" placeholder="Enter Full Name" maxlength="20">
      </div>

      <div class="chooNameGroup">
        <label for="schoolNameTextBox"> School:</label>
        <input type="text" id="schoolNameTextBox" placeholder="Enter School Name" maxlength="35">
      </div>
    </div>

    <div class="Questions">
      <h2> Question 1: Which of the following choices best matches the description of your sleep schedule</h2>
      <div class="option">
        <input type="radio" id="Question1Choice1" name="Q1" value="Q1Answer1">
        <Label for="Question1Choice1">Go to sleep early, wake up early</Label>
      </div>
      <div class="option">
        <input type="radio" id="Question1Choice2" name="Q1" value="Q1Answer2">
        <Label for="Question1Choice2">Go to sleep late, wake up early</Label>
      </div>

      <div class="option">
        <input type="radio" id="Question1Choice3" name="Q1" value="Q1Answer3">
        <Label for="Question1Choice3">Go to sleep early, wake up late</Label>
      </div>
      <hr width="95%" />
    </div>

    <div class="Questions">
      <h2>Question 2 : Which of the following best matches your cleanliness. </h2>
      <div class="option">
        <input type="radio" id="Question2Choice1" name="Q2" value="Q2Answer1">
        <Label for="Question2Choice1">Dirty</Label>
      </div>
      <div class="option">
        <input type="radio" id="Question2Choice2" name="Q2" value="Q2Answer2">
        <Label for="Question2Choice2">In the Middle</Label>
      </div>

      <div class="option">
        <input type="radio" id="Question2Choice3" name="Q2" value="Q2Answer3">
        <Label for="Question2Choice3">Clean</Label>
      </div>
      <hr width="95%" />
    </div>


    <div class="Questions">
      <h2> Question 3: What is your preffered room temperature</h2>
      <div class="option">
        <input type="radio" id="Question3Choice1" name="Q3" value="Q3Answer1">
        <Label for="Question3Choice1">Cold</Label>
      </div>
      <div class="option">
        <input type="radio" id="Question3Choice2" name="Q3" value="Q3Answer2">
        <Label for="Question3Choice2">Comfortable</Label>
      </div>

      <div class="option">
        <input type="radio" id="Question3Choice3" name="Q3" value="Q3Answer3">
        <Label for="Question3Choice3">Warm</Label>
      </div>
      <hr width="95%" />
    </div>


    <div class="Questions">
      <h2> Question 4: How comfortable do you feel sharing your belongings.</h2>
      <div class="option">
        <input type="radio" id="Question4Choice1" name="Q4" value="Q4Answer1">
        <Label for="Question4Choice1">Dont touch my stuff!</Label>
      </div>
      <div class="option">
        <input type="radio" id="Question4Choice2" name="Q4" value="Q4Answer2">
        <Label for="Question4Choice2">If you ask. </Label>
      </div>

      <div class="option">
        <input type="radio" id="Question4Choice3" name="Q4" value="Q4Answer3">
        <Label for="Question4Choice3">My stuff is your stuff!</Label>
      </div>
      <hr width="95%" />
    </div>

    <div class="Questions">
      <h2>Question 5: What is your preffered time to shower</h2>
      <div class="option">
        <input type="radio" id="Question5Choice1" name="Q5" value="Q5Answer1">
        <Label for="Question5Choice1">In the morning.</Label>
      </div>
      <div class="option">
        <input type="radio" id="Question5Choice2" name="Q5" value="Q5Answer2">
        <Label for="Question5Choice2">I am flexable, i have no preference</Label>
      </div>

      <div class="option">
        <input type="radio" id="Question5Choice3" name="Q5" value="Q5Answer3">
        <Label for="Question5Choice3">At night</Label>
      </div>
      <hr width="95%" />
    </div>

    <a class="ottombuttoncont" href="secondpagesurvey.html">
      <div class="bottombutton">
        <button class="bottom button" id="testbutt"> Continue to Next Page...</button>
      </div>
    </a>
  </div>
Tags:

2

Answers


  1. 0

    You set the font-size of your writing based on the width of the page, this makes the smaller the width of the page, the writing becomes smaller, as the writing becomes smaller, your box also becomes smaller and this makes the bottom of the page look empty.

    All you have to do is change the font size of the text, for example, to pixels.

    try like this:

    h1 {
   font-size: 20px;
}

p {
   font-size: 15px;
}

, ...
    Login or Signup to reply.
  2. 0

    You are not make any thing wrong but the content is shorter then the height of the window.
    you can simply but the background-image on all html so the whitespace don’t be clear to the user.

    However I really recommend you to not use flex column if display block can replace the case.

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

Back To Top
Search