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

Flexbox,Javascript

AkamineFabio• 220

@AkamineFabio

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I don't know how to set the 'align-self' or 'justify-self' on a flex-item. I've tried it in the button inside the success message, but it isn't working and I don't know why. I'm not sure if I suppose to do all this in a single page, or if the 'success message' was in another one, I made all in one, used 'preventDefault' on form submit and then made some changes in display properties.

Community feedback

Carl• 815

@CarlHumm

Posted

Hey there, you might find these links helpful

From what I can gather. Justify-self doesn't exist in flexbox. Align-self positions elements relative to the cross-axis - so up and down for flex-direction: row and left and right for flex-direction: column. The only options for positioning on the main-axis independent to the parent containers alignment options is to use auto margins. You can set margin-top: auto on your button to have it space itself away from the other elements and take up the remaining vertical space. Other than auto margins you can also use flex-grow to stretch to fill that space, but you wouldn't want that for this challenge.

Seperate success page or all in one?

Completely up to you. Pick whatever method you want to practice. Some people practice using cookies, others creating and rendering DOM elements. For the most part people follow a similiar approach to what you've done and include the success HTML in the same component and toggle its display using JS. If you wanted to take it further you could attempt to implement some animated transition. Up to you.

Good luck on your future projects!

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