Total CSS noob here. I am struggling to find a solution to making my background image and the transparent blue overlay to cover the full page. I used a margin of 0 in the body element, which removed white space on left and right. I also tried targeting the html and body with a min-height of 100%, among a few other attempts. Here is the link to my codepen if anyone can take a look at the code and shed some light:
use the selector * to select all elements and use box-sizing property like this
* {
box-sizing: border-box;
margin: 0;
}
you can read more about those two here
selector *
box-sizing property
happy coding! 
1 Like
Thanks so much. That was a good catch! I now see the top of the image and overlay reaches the top of the page, with no white space. I do still see white space on the bottom of the viewport after making the correction, though.
No worries! I appreciate the recommend to check dev tools and was in the process of looking at those. Setting the height to 100vh seems to have helped, though I’ll need to see why white space appears at bottom when shrinking the screen to a tablet size. Work in progress, and thanks so much for your time.
wait wait i set height: 100vh to your div .darkLayer and shrank it. it worked. please try. i can’t trust my eyes
1 Like
I see the background-image and .darklayer both reach the bottom until it gets shrunk down to about five inches. I’m attaching a screenshot to see how it appears on my phone:
is that a textarea element? you may want to resize it a bit, it is that that is covering your background image
1 Like
Ok i just removed that height and set margin: 0; to the body. not sure what’s going on. i’m the phone right now and it seems ok but i can only see the difference in editor view. i can’t it’s behavior in full view till you make changes.
here is my form: https://codepen.io/fernie-cpu/pen/yLazBep
i changed background to pink to see if there was any difference because before it was white so i couldn’t quite tell but it seems fine. check it out.
i gotta go to sleep it’s past 4am here lol i hope you can figure out what’s going on man. sorry i couldn’t helped more
1 Like
omg we were focusing so much on that margin at the bottom that we totally missed that. you always know what to do lol
1 Like
Thank you. I experimented with the resize property values (none, horizontal, vertical, both), though these did not remove the white space along the right side of the screen, and the text box still stretches too far to the right when viewed in mobile Chrome (and when desktop Chrome browser is shrunk to it’s narrowest width). I did set a max-height and width in the new code I saved, though this did not solve the problem either. Not giving up! I really appreciate your time. May head to bed soon, but thanks for anything you can spot!
You’ve been awesome! I’ll be sleeping very soon as well. Just nagged by this one issue!
now a thing that could be happenin is that your background stops at 100vh, try giving it a 100% or something
most of your survey form does not have a background if viewed in smaller screens
1 Like
Ah! I set max-width and height of the textarea to 100% (so, of the parent element) and that ditched the white space along the right side. Now it only appears surrounding the submit button at the bottom. I did that before I saw your most recent message! I will check the 100% for background. And, in fact, changing height from 100vh to 100% in my dark overlay (.darkLayer) surrounded the submit button and removed all white space. You guys rock!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.