Skip to content
Submitted over 2 years ago

Ping coming soon page - using grid, mobile-first work flow, vanilla JS

Nguyen Nguyen•340
@jesuisbienbien
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Under the mobile view, my error message and submit button is too close. I tried adding margin for both element, it still doesn't work (nothing moved). I don't know why? What am I missing here? Any help would be appreciated.

Any other feedbacks are welcome. Happy coding!

Community feedback

  • Adrian H•420
    @AdrianX19Posted over 2 years ago

    Hi @jesuisbienbien!

    congrats on completing this challenge! really good job! :) The issue you have is caused because <small> elements is an inline and for such elements the top and bottom margin/padding has just not effect, you can do a couple of things to make it working for example you can replace <small> with some block element like <p>, you can change your current element to a block element by adding 'display: block' or you can add margin to your container 'email-error-container' :)

    Marked as helpful
    1
    Nguyen Nguyen•340
    @jesuisbienbienPosted over 2 years ago

    @AdrianX19 oh I didn't know that. Thank you so much for your help.

    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