How to remove white space at bottom of HTML page caused by reducing image width

DeclanDavies
April 10, 2023
235 views
0 votes
2 Answers

When I reduce the screen size, white space is appearing at the bottom of the page, as shown. I believe it’s being caused by a Media Query, it happens because an image width is being reduced in the media query, but I don’t understand why that adds white space underneath.

The image is stored in a flex container. Removing the flex container also eliminates the white space.

How can I reduce the width of the image without adding white space at the bottom of the page?

Here is my code:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.about_container {
  display: flex;
  flex-direction: row;
}

.about_container img {
  width: 600px;
  margin-left: 20px;
  margin-top: 20px;
}

.about_container p {
  margin-left: 20px;
}

p {
  font-size: 30px;
  font-weight: 350;
  font-family: "LiberationSansRegular";
  font-style: normal;
  text-align: right;
  margin-top: 50px;
  margin-right: 50px;
}

p span {
  font-weight: bolder;
}

.second_p {
  text-align: left;
}

.about_one {
  background-color: #ebe5dd;
  border: 1px solid rgb(102, 94, 94);
}

.about_one h1 {
  font-size: 28px;
  padding-left: 20px;
  line-height: calc(15vw / 3);
}

/*___________MEDIA QUERIES___________  */
@media screen and (max-width: 1550px) {
  .about_one h1 {
    font-size: 24px;
    line-height: 15vw/3;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 1460px) {
  .about_container img {
    width: 450px;
  }
  p {
    font-size: 24px;
  }
  .about_one h1 {
    font-size: 24px;
    line-height: 15vw/3;
    margin-bottom: 40px;
  }
}

<body>
</header>
<main>
    <div class="about_container">
        <img src="pictures/hungarian flag.jpg" alt="" />
        <div class="column_container">
            <p>
                The Hungarian language, or the <em><span>magyar nyelv</span></em
            >, isn't Slavic like its neighbouring countries. Standing isolated
                in Central Europe, Hungarian originates from the Uralic mountains of
                Asia, where our ancestors led a nomadic lifestyle. Thousands of
                years ago they had their own Runic alphabet, unique mythologies and
                belief systems.
            </p>
            <p class="second_p">
                Today Hungarian is spoken by approximately 13 million people
                worldwide, and is famously liked by international film directors for
                our beautiful voiceovers and our film studios. Linguists also praise
                Hungarian for its logical, agglutinating patterns and its rich
                vocabulary that is hard to compare to any other language in the
                world.
            </p>
        </div>
    </div>
    <section class="about_one">
        <h1><li>Hungarian-born native teacher living in the UK.</li></h1>
        <h1>
            <li>
                I am trained in teaching both Hungarian and English, and have
                graduated with an English and American Studies Degree
            </li>
        </h1>
        <h1>
            <li>Services available through English or Hungarian medium</li>
        </h1>
    </section>
</main>
</body>

Tags: css html

Answers

You can use flex-grow: 1 to fit all height.

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    display: flex;
}

main {
    display: flex;
    flex-direction: column;
}

section {
    flex-grow: 1;
}

Example:

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    display: flex;
}

main {
    display: flex;
    flex-direction: column;
}

section {
    flex-grow: 1;
}

.about_container {
    display: flex;
    flex-direction: row;
}

.about_container img {
    width: 600px;
    margin-left: 20px;
    margin-top: 20px;
}

.about_container p {
    margin-left: 20px;
}

p {
    font-size: 30px;
    font-weight: 350;
    font-family: "LiberationSansRegular";
    font-style: normal;
    text-align: right;
    margin-top: 50px;
    margin-right: 50px;
}

p span {
    font-weight: bolder;
}

.second_p {
    text-align: left;
}

.about_one {
    background-color: #ebe5dd;
    border: 1px solid rgb(102, 94, 94);
}

.about_one h1 {
    font-size: 28px;
    padding-left: 20px;
    line-height: calc(15vw / 3);
}

/*___________MEDIA QUERIES___________  */
@media screen and (max-width: 1550px) {
    .about_one h1 {
        font-size: 24px;
        line-height: 15vw/3;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 1460px) {
    .about_container img {
        width: 450px;
    }
    p {
        font-size: 24px;
    }
    .about_one h1 {
        font-size: 24px;
        line-height: 15vw/3;
        margin-bottom: 40px;
    }
}

<body>
</header>
<main>
    <div class="about_container">
        <img src="pictures/hungarian flag.jpg" alt="" />
        <div class="column_container">
            <p>
                The Hungarian language, or the <em><span>magyar nyelv</span></em
            >, isn't Slavic like its neighbouring countries. Standing isolated
                in Central Europe, Hungarian originates from the Uralic mountains of
                Asia, where our ancestors led a nomadic lifestyle. Thousands of
                years ago they had their own Runic alphabet, unique mythologies and
                belief systems.
            </p>
            <p class="second_p">
                Today Hungarian is spoken by approximately 13 million people
                worldwide, and is famously liked by international film directors for
                our beautiful voiceovers and our film studios. Linguists also praise
                Hungarian for its logical, agglutinating patterns and its rich
                vocabulary that is hard to compare to any other language in the
                world.
            </p>
        </div>
    </div>
    <section class="about_one">
        <h1><li>Hungarian-born native teacher living in the UK.</li></h1>
        <h1>
            <li>
                I am trained in teaching both Hungarian and English, and have
                graduated with an English and American Studies Degree
            </li>
        </h1>
        <h1>
            <li>Services available through English or Hungarian medium</li>
        </h1>
    </section>
</main>
</body>

Since you are already using height: 100%; on body and html it makes sense just to carry that height down to main.

Then you can flex main with flex-direction: column; and use margin-top: auto on .about-one to get it at the bottom.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.about_container {
  display: flex;
  flex-direction: row;
}

.about_container img {
  width: 600px;
  margin-left: 20px;
  margin-top: 20px;
}

.about_container p {
  margin-left: 20px;
}

p {
  font-size: 30px;
  font-weight: 350;
  font-family: "LiberationSansRegular";
  font-style: normal;
  text-align: right;
  margin-top: 50px;
  margin-right: 50px;
}

p span {
  font-weight: bolder;
}

.second_p {
  text-align: left;
}

.about_one {
  background-color: #ebe5dd;
  border: 1px solid rgb(102, 94, 94);
}

.about_one h1 {
  font-size: 28px;
  padding-left: 20px;
  line-height: calc(15vw / 3);
}


/*___________MEDIA QUERIES___________  */

@media screen and (max-width: 1550px) {
  .about_one h1 {
    font-size: 24px;
    line-height: 15vw/3;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 1460px) {
  .about_container img {
    width: 450px;
  }
  p {
    font-size: 24px;
  }
  .about_one h1 {
    font-size: 24px;
    line-height: 15vw/3;
    margin-bottom: 40px;
  }
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

section.about_one {
  margin-top: auto;
}

<body>
  <main>
    <div class="about_container">
      <img src="pictures/hungarian flag.jpg" alt="" />
      <div class="column_container">
        <p>
          The Hungarian language, or the <em><span>magyar nyelv</span></em
            >, isn't Slavic like its neighbouring countries. Standing isolated
            in Central Europe, Hungarian originates from the Uralic mountains of
            Asia, where our ancestors led a nomadic lifestyle. Thousands of
            years ago they had their own Runic alphabet, unique mythologies and
            belief systems.
          </p>
          <p class="second_p">
            Today Hungarian is spoken by approximately 13 million people
            worldwide, and is famously liked by international film directors for
            our beautiful voiceovers and our film studios. Linguists also praise
            Hungarian for its logical, agglutinating patterns and its rich
            vocabulary that is hard to compare to any other language in the
            world.
          </p>
        </div>
      </div>
      <section class="about_one">
        <h1><li>Hungarian-born native teacher living in the UK.</li></h1>
        <h1>
          <li>
            I am trained in teaching both Hungarian and English, and have
            graduated with an English and American Studies Degree
          </li>
        </h1>
        <h1>
          <li>Services available through English or Hungarian medium</li>
        </h1>
      </section>
    </main>
  </body>

Please signup or login to give your own answer.

Click here to cancel reply.