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

Html – Remove white space at the bottom of my webpage

I have an interesting problem for you. It might be simple but I’m all out of ideas!

It only appears when I narrow the window to less than 300px that I set as minimum width size. I don’t want any white space below the picture.

enter image description here

The html is;
”’

<!DOCTYPE html>
<link rel="stylesheet" href="index.css">

<html>
  <body>
      <img src="bakgrunn.jpg" class="bakgrunn" alt="Fantasy Gambling">
  </body>
</html>

”’

and the css is;
”’

* {
    margin: 0;
    padding: 0;
}
.bakgrunn {
    width: 100%;
    min-width: 300px;
    
}

”’

Can anyone come up with a solutions to this seemingly simple problem? Thanks so much in advance.

Chris

Tags:

2

Answers


  1. 0

    If you don’t want the area below the image to be white, then set a background color on the body.

    If however, you want the image to be as tall as the page, then you need to specify a height for it.

    See EDIT comments in the code snippet for specific edits.

    * {
    margin: 0;
    padding: 0;
}


.bakgrunn {
    /* EDIT Add height to remove gap at bottom of img */
    height: 100vh;
    /* EDIT Set to block to prevent scroll bar */
    display: block;
    
    width: 100%;
    min-width: 300px;
}
      <img src="https://placebear.com/400/200.jpg" class="bakgrunn" alt="Fantasy Gambling">
    Login or Signup to reply.
  2. 0

    The problem is not with the width nor with the height.
    The blank space occurs because you haven’t said anything to the browser that covers the whole screen of the phone dimensions or less than 300px.

    You can write height: 100vh; in the CSS file to cover the whole screen, as 100vh means 100% of the screen.

    Here is an example for you:

    * {
    margin: 0;
    padding: 0;
}
.bakgrunn {
    width: 100%;
    min-width: 300px;
    height: 100vh;
}
    <!DOCTYPE html>
<link rel="stylesheet" href="index.css">

<html>
  <body>
      <img src="https://placebear.com/400/200.jpg" class="bakgrunn" alt="Fantasy Gambling">

  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search