New course! Every coder should learn Generative AI!
Try a free lesson0
linear gradient syntax not working in code playground
Not quite sure what I'm doing wrong. I am trying to create a linear gradient in the code playground. I have the code input into both html and css but the output isn't coming out like the example is showing me. I would really appreciate some insight! Thanks!
5 Answers
+ 7
vw stands for Viewport Width;
vh stands for Viewport Height;
Both units represent 1% of the total size, so 100vw is the available width and 100vh is the available height...
+ 5
@Will Cavalcanti:
Better practice to set 'body, div' instead '*', and you can even avoid it ( styling the body ) by just:
div {
position:absolute;
left:0;
top:0;
width:100vw;
height:100vh;
background:linear-gradient(to bottom, red, yellow);
}
+ 2
// the html:
<body>
<div></div>
</body>
// the css:
*{
margin:0px;
padding: 0px;
height: 100%;
}
div{
background: linear-gradient(to bottom, red, yellow);
}
i just did this right now and it's working pretty well, not sure how is the exemple that you said is showing it
+ 1
thanks for sharing, @visph. i just forgot about "vw" and "vh" and couldn't remember it, but my main purpose was to show the linear-gradient could work on here :D
0
Thank you both for the help. Not sure why what I was doing yesterday wasn't working. I tried both of your examples and they worked. Another quick question, what does vw and vh mean? I haven't seen those used yet.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help me plss
4 Votes
Wrong?
0 Votes
Internal vs external JS
2 Votes
Can anyone guide me
0 Votes
Putting files in another folder
1 Votes