Hi everyone. I’m a newbie to web programming and I’m looking for some help. I’m trying to build a mock-up web page on codepen.io but I’m really stuck on something. The div box I’m using to make a gradient won’t stretch fullscreen no matter how many attempts I’ve made with any code I’ve used. I’ve tried 100% and also 100vh. I’m not sure If something else in my code is preventing it from working or “breaking” it? So, obviously I need somebody with more experience to take a look, please. Here’s the link and thanks for looking! : https://codepen.io/TheBrunetteCoder/pen/dyoEweM
I’m supposing that by “fullscreen,” you mean the entire width of the viewport? In that case, replace the div’s css width property value with
100vw. vh is viewport height; vw is viewport width.
disregard–> I took a look at your pen and if I had to guess, you are attempting to use the gradient div as a background for the page, am I correct? <-- disregard
I see you have your gradient div at
float: right. Are you trying to have the
div flush side by side?
First remove left margin from your
p then set your div to
I understand you also need to set the image to left and the text to right And everything will display on the top of the gradient to look it awesome, right?
That’s another issue, here, first get the experience for what is preventing you from making the div as you expect. If you understand upto this point, let me know, I’ll help you the next steps.
Yes, I’m sorry that I didn’t explain what I’m trying to do. I’m trying to set the photo exactly where you see it and also have the gradient div to fill the remainder of the screen top to bottom with no white space, so yep I’m trying to get the div to the full height of the viewport with the image and div side by side.
I at one time tried to make the div into a background but it always put my image into a window for some reason and no matter what I tried I couldn’t get the gradient background to work with the photo without the photo ending up in a window. I should mention I’m on a chromebook, so I don’t know if things will show up different for other users vs how they appear on a chrome browser. Thanks for your help.