Submitted about 1 year ago

Interactive card details form. React+Vite

#vite#react

Bernardus• 1,115

@BernardusPH

Preview site View code

This is a solution for...

Interactive card details form

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey

The credit card app is actually autocompleting users credit card. How can I stop this behavior in my code. autocomplete="off" does not work?

I want the footer to be at the bottom (im not using position this time). Im using flex to center everything and added flex-direction:column for vertical view but margin-top:auto on the footer pushes the main to the top. justfify-content:space-around/space-evenly is a no go.

Sorry for the ugly code, im very tired and will refactor this and fix some css problems later.

I hope you guys can help me. Thank you.

Community feedback

EmmahNcodes• 190

@Emmahchinonso

Posted about 1 year ago

Hey there, I'm not sure of the auto-complete issue but to push the footer to the bottom, you'll add a margin-top: auto. The reason why it pushes the main up is there is no defined space above main, you can also give the Main a margin-top: auto to resolve that issue. It's best to give a defined margin-top to Main instead of using auto tho.

Marked as helpful

Bernardus• 1,115

@BernardusPH

Posted about 1 year ago

@Emmahchinonso

Thank so much. I thought adding a margin to the main would push it even more or create extra space ontop but this worked

Guess I need to relearn the basics.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord