Skip to content
Submitted about 1 year ago

Responsive Newsletter Sign Up using React + Vite

react, vite
ren•50
@ktmagno
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of accomplishing the whole challenge using React + Vite (which was VERY challenging for me 🫠). It's not perfect, but I believe it serves its purpose so I decided to upload it. Next time I want to learn Sass or enhance my skills in React.

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

I encountered many challenges, from building up to deploying. That's why I relied more on YT tutorials.

What specific areas of your project would you like help with?
  1. How to change an image/illustration when the screen size changes to mobile view
  2. Error state input field
  3. There's a huge white space appearing below the button when the user inputs invalid email (mobile view)
  4. Footer not showing

Update:

  • problems #3 & #4 are fixed, all thanks to @Code-Beaker 😁
  • displays an error message if the input field is empty upon submission
Code

Please log in to post a comment

Log in

Community feedback

  • Tharun Raj•1,330
    @Code-Beaker

    Hi there, congratulations on completing this challenge. You've done a great job here! 🎉

    I will try my best to answer the questions you've shared.

    • To switch the images on different screen sizes, we usually use an HTML attribute called srcset. It is used to create responsive images on the web without the use of CSS. This property also helps in increasing the performance of your website by loading the appropriate image with the required size, dimensions, etc. Here is an example syntax:
    <picture>
<source media="(min-width: 50rem" srcset="folder/DesktopImageFile"/>
<img src="folder/MobileImageFile" alt="My responsive image"/>
</picture>

    Here, the browser will automatically load the larger image when the screen size is 50rem or above. Otherwise, it will be a smaller image that's meant for mobile phones or other smaller screens.

    • I checked the error state and it seems to be working as expected. But, If I submit the form leaving the input empty, it displays no error.
    • The whitespace might have been caused by position: absolute that you've used to centre the component on the screen. Fortunately, there is an easier way to centre things on the screen!

    On the main container, give a min-height: 100vh, so that the content doesn't get hidden on a taller viewport. Then use a simple flex layout to centre things.

    .signup {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

    Using this will remove the issues caused by position: absolute and related properties on the .newsletter.

    • Using the above layout will fix the issue of the footer getting hidden.

    Aside from these, I would like to share some of my suggestions regarding your code.

    • Use relative units like rem instead of absolute units like px. This will be better when handling responsive layouts. This can be used for various properties including font sizes, padding, margins, etc.

    Hope this helps you improve your solution! 😃

    Marked as helpful

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