White Screen of Death while using % unit in css file

Code Help HTML/CSS/JS
1

Question:
getting WSOD (White Screen of Death ) while trying to create a responsive website using HTML, Javascript, and CSS.

Current behavior:

When I try to change the px to % I getting complete white screen of death. Tried this code on different browsers (Chrome, Edge, Mozilla) but Am facing the same problem.

Desired behavior
I am getting the desired output while using px.

Repl link:
https://replit.com/@mohemmadHazarudin/Responsive-WebDevelopment-Website-for-All-Devices

Here is the code Am trying to execute available in the CSS file.

#box{
  
  /* height: 300px;
  width : 300px; */
  height: 30%; 
  width: 30%; 
  background-color: crimson;
}
2

Welcome to the community, @mohemmadHazarudin!
Try using 30vh and 30vw, which stand for 30 view height and 30 view width respectively.
Your CSS would now look like:

#box{
  height: 30vh; 
  width: 30vw; 
  background-color: crimson;
}

If you found my answer helpful, feel free to mark it as the Solution!

3

Thanks for the response brother I tried all the units which are giving the desired result but my question is why Am getting the white screen of death while using the % unit?

1 Like
4

I think that the problem is because the body element has no set width and height, causing it to be infinitely small if the content inside is small or nonexistent, and because the #box element depends on the width and height of its parent element body, it will rely on the infinitely small body element (which will only grow if there is content inside) which will also make the red box infinitely small.

5

If the body element has no set width and height then how it will work for px unit brother, As I clearly mentioned that its working fine with px but while using % unit am facing the WSOD.

6

While using px unit Am getting the desired output i.e square.
but while I try to use % the desired output should be rectangle but Am facing the WSOD.

7

px is an absolute unit, meaning that it has no dependance on its parent. However, because percentages rely on the parent element, you can set the body element to width: 100% and height: 100% (the parent of body is the browser window which is already full screen).