Starter Project

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @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: translateX(-50%);
      top: 50%;
  }
  .attribution {
      position: absolute;
      bottom: 2%;
      left: 50%;
      transform: translateX(-50%);
  }
  

  ---

  • Now your component has been properly centered

  ---

  .

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

  Happy coding!

  1
• 

  Furk•600

  @doganfurkanPosted over 1 year ago

  Your h2 and p elements have their default margins. You can see default values here: w3schools They are the reason there is a gap there. You can give them a margin of 0.

  A little tip for me is to start styling with cleaning default alignments. You can use *{ margin:0; padding:0; box-sizing: border-box; } to get rid of default alignments

  1

  ---

  

  Aharen-Pranata•30

  @AlvinSetyaPranataPosted over 1 year ago

  Thanks, i forgot to remove the default thoose, @doganfurkan

  0

  

  Furk•600

  @doganfurkanPosted over 1 year ago

  @AlvinSetyaPranata You are welcome. Can I ask you to mark my comment as useful if you think so?

  Marked as helpful

  1