Question on linear gradient CSS

Question

1)Why is my linear gradient extending to the whole screen vertically? I have mentioned the body height as 100px, but it's extending to the whole screen.

2) Why is that little scroll present? (Am using Android phone) I've defined the width to be 100% but it's extending a little farther than 100%, I don't know why, and how to prevent it?

3) If I change the "90deg" to "left", it's not working, why?

I learnt all these from the lesson https://www.sololearn.com/learning/2242/

Thank you very much for any help :)
https://code.sololearn.com/W77vb3weG69I/?ref=app

Answer 1

1. It isn't. In fact, the html element inherits some body attributes - yes, the opposite we'd expect. Try setting a fixed background color to the html element, like "black", and it becomes clear.
2. width and height apply to the content part of any element. But there's still padding, border and margin, which take additional space, causing overflow. Try setting all of them to 0px.

Answer 2

https://code.sololearn.com/WgNnfn1mf6CW/?ref=app

Answer 3

3. The syntax is "to left", not just "left".

Answer 4

Set margin: 0; inside the body class. This will work.
And prefer using it everytime. I myself use it too.

Answer 5

1) make a div and give it relevant height and width...

2) to hide the scrollbar you can do two things: make the body margin to 0px and padding 0px (i would prefer this everytime in css).

Or giving webkit scrollar to 0px.

*(the second way is the best)

**(Search in google for hiding the scrollbar...if you will be unable to find I will attach the link later)

3) learn the linear gradients from google.or from the CSS course
(search it too, will attach the links if you be unable)

Answer 6

https://code.sololearn.com/WC4ucJ4MA62I/?ref=app

Check this out

Answer 7

Try using
background-repeat: no-repeat
property
This simply hides the repeating linear-gradient

Answer 8

Thank you
Do you know how to use the overflow property