Skip to content
Submitted almost 2 years ago

Interactive card details form

andreimaier•180
@andreimaier
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 there! 👋

For this one I spent over 30hours and it's still far from what I would like it to be, but I have to move on. I would appreciate any advice on how I can:

  • position the two cards on the page other than absolute, if any
  • ensure responsiveness
    • the way i did it is with using vw for everything on the cards and it won't work for people who change their default font sizes.

Community feedback

  • Nelson•2,390
    @nelsonleonePosted almost 2 years ago

    Hello congrats on completing this challenge, 🎊🎊

    Here are some tips on positioning , hope it was helpful.

    • Firstly , you can consider building for mobile first, Take a mobile first approach because the mobile setup is not that complicated.

    • Secondly , for positioning, You can have a <main> tag with two child container divs that will contain the cards and the other for the form. `<main>

    <div cards-container> <div form-container> </main>`

    you set a position relative on the divs , then you can easily position the cards as you want in there containing block. with position:absolute

    Marked as helpful
    0
  • Antwi Isaac•115
    @okraksPosted almost 2 years ago

    Hello Andreimaier, Great work done so far!

    For positioning the two cards on the page, you can utilize flex align-items: center to center the div containing the two cards (along the cross axis that is) See more here in the Mozilla docs

    Marked as helpful
    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