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

Responsive Newsletter Signup with Success Message

@hassanauman

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


It was a challenge to make it responsive for mobile screens as some of the things were not working with css at first.

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨To properly center the container.

  • USING FLEXBOX
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
  • USING GRID
body{
min-height: 100vh;
display: grid;
place-items: center;
}

➨ You are using vw almost everywhere vw is not good practice to use everywhere as this will cause very large sizes for larger screen.

➨ Use some other responsive units(rem, em, %) from next project. Explore respective use cases on google.

link.

➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

I hope you find this helpful.

Happy coding😄

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