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.
I am getting the desired output while using
Here is the code Am trying to execute available in the CSS file.
/* height: 300px;
width : 300px; */
Welcome to the community, @mohemmadHazarudin!
30vw, which stand for 30 view height and 30 view width respectively.
Your CSS would now look like:
If you found my answer helpful, feel free to mark it as the Solution!
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?
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.
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.
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.
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).