Submitted 10 months ago

React Multistep Form

react

Kamelek1337•190

@Kamelek1337

A solution to the Multi-step form challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that I was able to build the entire website on my own and it is fully functional. I think I will use Tailwind CSS next time in my project 💨

What challenges did you encounter, and how did you overcome them?

The hardest part of creating this site was saving the checkbox data to localStorage because I didn't want to create three states to manage this inputs, but I still haven't found a better solution

What specific areas of your project would you like help with?

Feedback welcome😃

Code

Please log in to post a comment

Community feedback

P
Huy Phan•3,430
@huyphan2210
Posted 10 months ago
Hi, @Kamelek1337

I took a look at your solution and I have some thoughts:
- Your body covers the full viewport because of min-height: 100vh, but your #app and .container don’t. In situations like this, I usually apply Flexbox to the body and #app, with flex-direction set to column, and use flex: 1 on #app and .container to make them stretch properly.
```
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#app {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.container {
  flex: 1;
/* Your styles here*/
}
```
This setup ensures both #app and .container expand to fill the available space of the body.
- You're hardcoding the width and height of .container and <main>. It also looks like you're not using media queries to make the form responsive (it seems like you're using React state to change its class, which is another valid approach). However, on viewports between 601px and 1200px, the form isn't centered or responsive. I'd suggest removing the hardcoded width and height, and using media queries to handle responsiveness.
Hope this helps!
Marked as helpful

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