Advice generator app. Vite+React, Typescript, framer-motion, Axios

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • You already using Flexbox for layout, but you didn't utilized it's full potential. You properly centered the components, But why did you add margin's actually its serves no purpose.

  ---

  • This may cause inconsistency on your design so remove the margin from the following elements, after removing you can able to see the changes

  .main-advice-card {
    margin-top: auto;
    margin-bottom: 1rem;
  }
  ._footer_1ijzc_1 {
    margin-top: auto;
  

  ---

  • Now your component has been properly centered, now we move on to next improvement.

  ---

  • The <footer"> element has been placed bottom using margin. So let me explain, How you can place the component at bottom with using fixed positioning for footer

  ---

  ---

  • Luckily you already used Flex layout of css to center the component, So you just want to add fixed position for <footer> element to place it in bottom of the page

  footer {
     position: fixed;
     bottom: 1em;
  }
  

  ---

  • Now remove these styles, after removing you can able to see the changes

  ---

  .attribution {
    padding-top: 3em;
  }
  

  ---

  • Now your component has been properly at bottom

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Bernardus•1,095

  @BernardusPHPosted over 1 year ago

  @0xAbdulKhalid Thank you very much.

  Man I am so used to just using top,left,right and bottom on fixed and absolute items that I forgot that they can be affected by flex too.

  But with fixed it might overlap with the main container but I believe that that is not an issue I should worry about.

  Also I dont see the:

   .attribution {
    padding-top: 3em;
  }
  

  you are talking about can you tell me where you are seeing it?

  0
• 

  Bilal Türkmen•340

  @bilalturkmenPosted over 1 year ago

  Hi, nice work.

  I have a simple suggestion for the footer section to be at the bottom.

  you should delete this line

  and change this line

  like this justify-content: space-evenly;

  i think it will look better 🤙

  Marked as helpful

  1

  ---

  

  Bernardus•1,095

  @BernardusPHPosted over 1 year ago

  @bilalturkmen Thx I played around with it and ended up removing the position on the footer.

  While also adding margin-top:auto to the main and footer that should fix the issue and make it look nice.

  1

  

  Bilal Türkmen•340

  @bilalturkmenPosted over 1 year ago

  @BernardusPH yea it looks more effective.

  maybe you can also add margin-bottom: 1rem for some space ;)

  1

  

  Bernardus•1,095

  @BernardusPHPosted over 1 year ago

  @bilalturkmen will do, Thank you very much

  1