Im working on my product landing page and trying to get all the tests to pass. Therefor I moved the submit button from outside the form element to inside it. There was a small alteration i made to the divs in this section of my code to get the layout the same as it was before (unfortunately i cant remember or figure out what i changed, just html though).
As a result my footer got pushed away from the bottom, i can fix that part, but it also changed the width and pushes it away from the left side. I got no clue whatsoever why this happens since i only changed a few lines of html.
Im really curious what is causing this so if anyone can explain me, I will be grateful. Any solutions are obviously also welcome
Hey,
I get that it can be hard to see your own mistakes in something that you wrote, but try and read it carefully. You can use an online validator to help you find your mistakes, I suggest you google “HTML validator” and pick the w3c one. The HTML won’t validate. This can make fixing your page easier.
Second, you don’t know how to use codepen. In, codepen the HTML window is only for the markup inside the body tag. To put things in the head tag open the Settings panel and type it in the “Stuff for head” box. Then click css and check “reset”. That will give you a css reset in your project.
Third try to interact with your page like a user. Try closing the FCC menu. When I did I found another one underneath. That means you linked to the script twice.
After I cleaned up some of the HTML the footer problem was still there. I noticed “designed by” was in an empty ul. Don’t do that. If you need it in another block element, and I think you do, use div.
It was confusing to me why you used width: 100vw; and min-width: 100vw; so much and sometimes at the same time. I removed some of them without making a difference.
The thing to fix the footer is to remove the absolute class from the ul and put it on the footer.
While it passes the tests i wouldn’t call it “done” until the HTML and CSS is polished and you use only what is necessary.
