Responsive Newsletter Sign Up using React + Vite

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 5 months ago

  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

  0

  ---

  

  ren•50

  @ktmagnoPosted 5 months ago

  noted on all of that, thank you so much! @Code-Beaker 👍🏼

  1