Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive card details form

@andreimaier

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@nelsonleone

Posted

Hello congrats on completing this challenge, 🎊🎊

  • 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

@okraks

Posted

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
Discord logo

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