Responsive Success Message using jQuery and Sass

Community feedback

• 

  Arshad Ali Kaldane•650

  @IamArshadAliPosted 12 months ago

  Hello There! 👋

  Congratulations on completing this challenge 🎉

  I do have some suggestions that might interest you. 💡

  Overflow:

  Your content is overflowing because of two reasons:

  • You've only specified margin-left to your .container > *
  • You are explicitly setting the width of the .listItem & .inputContainer to 100%

  Overflowing problems can be fixed by

  .container > * {
      margin: auto 20px; // set horizontal margin to your .container children
  }
  
  .listItem {
      width: --webkit-fill-available; // acquires the available space to prevent overflowing
      ...
  }
  

  As there is a list of features, wrap them in a <ul class="list"><li class="listItem">...</li>...</ul> instead of <span class="listItem">

  One more area I found that can be improved in your code is your submit button:

  Button:

  Instead of explicitly setting width and height and then specifying flex to center the text, you can give padding to the button and align the text to the center like this:

  <button class="button" type="submit">...</button>
  
  .button {
      text-align: center:
      padding: 10px 25px;      
      width: 100%;     // gets the full width from the parent flex container (.inputContainer)
  }
  

  Above all your solution looks great! ✨

  As I said, you already did an excellent job, but these details will improve it even further. 🚀

  I hope this helps 👍

  Happy Coding 🤓

  Marked as helpful

  1
• 

  Abbigail Merrill•130

  @abbigailmerrillPosted 11 months ago

  This feedback was extremely helpful, and provided me with new ways to keep working forward! Thank you

  0