Submitted 7 days ago

Newsletter Signup Form with Vite, React, CSS modules, React Hook Form

Ronald Yonggi• 170

@ronaldyonggi

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Newsletter sign-up form with success message

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Having issues where when I used the illustration images svg, somehow the displayed image would have additional white space either at the top or bottom. I ended up getting rid of the padding in my desktop design to get rid of the extra whitespace, although this causes my final design to not have padding unlike the desired design

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

Anyone else having issues with the illustration svg files, where when displayed you'll see extra white space?

Community feedback

Derik Boghozian• 190

@psychederik

Posted 5 days ago

First off, great job! Your app functions as intended.

To answer your question, I'm not 100% sure where the extra white space is coming from on your illustration svg. If I had to guess, maybe check these two things: .image { "width: 100%" } , OR perhaps try using the <picture> element instead of determining the size with a React className.

I am still in the earlier stages of the React learning process so these are just my guesses. Hope you find a solution to the extra white space! Keep up the great work 👍

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