Hello, please find below my second html/css project.
I can’t figure out why the overlay does not fit all the screen !
Any reccomandations are welcome !
Hello, please find below my second html/css project.
I can’t figure out why the overlay does not fit all the screen !
Any reccomandations are welcome !
Your form looks okay @ahmed512. Some things to revisit;
body
element in HTML. (No need to include the body
tags). For anything you want to add to the <head>
element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
<br>
element to force line breaks or spacing. That’s what CSS is for.You’ve set the height/width on the overlay to 100%, but this is 100% of its parent element (which is the <body>
). Using the dev tools in your browser hold your mouse over the <body>
and you’ll see that it is not taking up the entire page. You’ll need to figure out why and get rid of whatever is causing this. I’ll give you a hint, most browsers add a margin to the <body>
by default. But this is not the only element that has a margin that is causing you problems here.
Also, do not set a min-width on the <form>
. There is no reason for it and it creates an unnecessary horizontal scroll bar as you narrow the view port.
i’ve added this : * { margin: 0; }
and it fixed the issue! i didnot manage to know what else could fixed, i tried html tag but did not work!
That is certainly one way to fix it. The only potential drawback from doing that is that you have removed all the default margins the browser uses for other elements, so if you were relying on any of those then you’ll have to add them back manually as needed.