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

why is there a margin in the end of screen when elements pass the screen height – Html

This Is the screen shot of my projects before its pass the screen height

This Is the screen shot of my projects Aftrer its pass the screen height

when I just passed the screen height suddenly a margin-end appears. I already tried
”’cover: 100% 100%”’ and it doesn’t make any sense because the image is shrinking because of that. and also I’m using bootstrap as my framework

I also tried,

”’width: 100%;
height: auto; ”’

And it’s also not working because when I add more elements height of the image increases its self for fit to the elements.

here is my CSS code:
”’
body {
background-image: url(‘Media Files/Images/JPG/BG photo of the home page.jpg’);
background-size: cover;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-position: center;
box-sizing: border-box;
background-repeat: no-repeat;
font-family: ‘sen’, sans-serif;
background-blend-mode: multiply;
}
”’

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    body {
overflow-x: hidden;

    }

    it's resolved when I put this css


  2. 0

    Have you tried setting the default margin and padding of all elements to 0 in your CSS? If you haven’t, do that and see what happens. e.g

    *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search