Product Landing Page - Build a Product Landing Page

Greetings: I am trying to center my name, email, and submit inputs in the center of my page, I am new to HTML/CSS and will appreciate any and all help as well as additional tips. Thank you.
[My landing Page] (https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page)

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

@malle2003

Hey there,

You can use CSS-Flexbox to do that. Set the display property of the parent element containing the <form>...</form> to flex and then set align-items property and justify-content property of the parent element to center for each, which will center the <form>...</form> vertically and horizontally with respect to the height and width of the parent element.

If you want your form to be centered with respect to the whole page, then make the parent element’s height and width containing the form to viewport-height(100vh) and viewport-width(100vw) respectively and then follow the above procedure.

Setting height: 100vh; and width: 100vw; is same as saying, set the height and width of a particular element to 100% of the viewable height and witdth of the window. For example, if you want 50% then set it as 50vh and 50vw respectively.

Hope I cleared your doubt. If it still seems confusing or you have further queries, please feel free to ask.

Happy Coding :keyboard: and Happy New Year :tada: !

1 Like

you need to paste your code here, this link bring to the project page, not to your own specific one

1 Like