Skip to content
Submitted about 1 year ago

Flexbox,Javascript

AkamineFabio•220
@AkamineFabio
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

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•855
    @CarlHummPosted about 1 year ago

    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

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