HTML & CSS

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 🎨:

  • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

  ---

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

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

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

  .container {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 25%);
  }
  

  ---

  • Now your component has been properly centered.

  ---

  .

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  KEYAJANI•20

  @KEYAJANIPosted over 1 year ago

  Hey there, thanks for your feedback, I will work on it and will be waiting for your upcoming feedback, Thanks a lot.

  Have a good day

  Karrar E.

  @0xAbdulKhalid

  0
• 

  Izzat Razab•70

  @izzatrazabPosted over 1 year ago

  Hi, firstly I am not really qualify to comment people's work as I am a beginner myself. But I will try and give suggestion that may benefits you.

  Your user interface in general is good but there are two things that can be fix:

  • It seems that your desktop view has lots of extra space below the product card. If you can remove it, it will better.
  • In your mobile view, your product card is not centered properly, it is slightly to the left.

  I want to read your codes but it seems that I can't access it, therefore I can't comment or try to fix on them. It says page not found.

  0

  ---

  

  KEYAJANI•20

  @KEYAJANIPosted over 1 year ago

  Hey there, thanks for your feedback, I will work on it and will be waiting for your upcoming feedback, Thanks a lot.

  Have a good day

  Karrar E.

  @izzatrazab

  0

  

  Izzat Razab•70

  @izzatrazabPosted over 1 year ago

  You're welcome

  0