Submitted 19 days ago

Newsletter Sign-Up Form + Success Message Built with HTML, CSS and JS

Daniel•240

@DAJ350

Preview site View code

This is a solution for...Newsletter sign-up form with success message

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

I'd like help on how I could better set the dimension of the mobile screen size (375px - 425px).

Also any advice on the best rule of thumb to follow when setting vertical spacing. I find percentages with width dimension simple as it's usually just a percentage of the screen width or parent width, but height dimensions are a bit more tricky for me.

Community feedback

Rebecca Padgett•1,840

@bccpadgePosted 19 days ago

Hello @ DAJ350. Congratulations on completing this challenge!!!🎉

To fix the width issue, you can remove width: 64.444444444444444% its unnecessary. You can add max-width on the .sign-up-form

The code blocks can be removed from your style.css file

.sign-up-form__text-content {
  display: flex;
  flex-flow: column nowrap;
  row-gap: 2.5rem;
  width: 42.727272727272727%;
  height: 50.681818181818182%;
  align-self: center;
}

@media only screen and (max-width: 48rem) and (min-width: 21.875rem) {
  .sign-up-form__text-content {
    width: 87.2%;
    padding: 2.5rem; // you can add padding on all sides and remove the width and height
    height: 100%;
  }

Add cursor: pointer on the input

I used the <picture> tag this way in my solution

 <picture>
  <source media="(min-width: 60rem)" srcset="./assets/images/illustration-sign-up-desktop.svg">
  <img src="./assets/images/illustration-sign-up-mobile.svg" width="375" height="284" aria-hidden="true" alt="">
 </picture>

I hope you find this useful and don't hesitate to reach out if you have any questions

Marked as helpful

Please log in to post a comment

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