Skip to content
Submitted over 1 year ago

Interactive card details form. React+Vite

Bernardus•1,095
@BernardusPH
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

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
    @EmmahchinonsoPosted over 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
    1
    Bernardus•1,095
    @BernardusPHPosted over 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.

    0

Please log in to post a comment

Log in with GitHub

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