Newsletter sign-up form with success message

Community feedback

• 

  Adriano•38,040

  @AdrianoEscarabotePosted 26 days ago

  Hi Michael Balogun, how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

  To center the form on the screen, you can use display: flex; to do this:

  .big-container {
      position: relative;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      /* margin-top: 10vh; */
      display: flex;
      /* z-index: -1; */
      /* margin-bottom: 50px; */
  }
  

  Avoid using margin or padding to center something, always prefer to use flexbox or grid for these situations.

  hahahh I saw that you mentioned that you were having problems with electricity, I was also having the same problem.

  The rest is amazing.

  I hope this is helpful. 👍

  Marked as helpful

  1

  ---

  

  Michael Balogun•240

  @Emynex4realPosted 26 days ago

  @AdrianoEscarabote

  Thanks for this suggestion. I really appreciate this and i will put what you show me into good use 😊 Thanks again

  but i do not really understand the min-width: 100vh; can you please explain what it does

  1

  

  Adriano•38,040

  @AdrianoEscarabotePosted 26 days ago

  @Emynex4real You're welcome! I'm glad you found it helpful 😊

  It ensures that the element takes up at least the full height of the viewport (screen), so it won't be smaller than the visible screen height. Let me know if that clears things up!

  1

  

  Michael Balogun•240

  @Emynex4realPosted 26 days ago

  @AdrianoEscarabote works like magic I had to go back and relearn the difference between width and min-width. Thanks for insight I really appreciate.

  0
• 

  Adriano•38,040

  @AdrianoEscarabotePosted 26 days ago

  Hi Michael Balogun, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

  To centralize the component, you can change the code to do this:

  .big-container {
      position: relative;
      /* margin-top: 10vh; */
      /* display: none; */
      /* z-index: -1; */
      /* margin-bottom: 50px; */
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  To improve the component's responsiveness, avoid using fixed measurements and try relative ones, for example:

  max-width: 370px;
  width: 100%;
  

  The rest is excellent.

  I hope you find it useful. 👍

  Marked as helpful

  1