Results Summary

Community feedback

• 

  George Manimbo•180

  @GeorgenicoPosted over 1 year ago

  Hi there, congratulation on finishing this project!

  I have a little suggestion. you can try to put display: flex on the body itself like the way you did on the main, this way it will automatically adjust and always be on center based on your screen size and I think you forgot to add a cursor on your button. As for me, you did a great job, and I find it good.

  display:flex
  min-height: 100vh
  justify-content: center
  align-items: center
  

  Marked as helpful

  0

  ---

  

  Matheus Chrispim Pelegrin•30

  @MatheusChrispimPosted over 1 year ago

  @Georgenico Thanks for your helping, tips noted!

  0
• 

  Isfaqul•370

  @IsfaqulPosted over 1 year ago

  Congratulations on completing this Challenge Matheus. You have done a good job of re-creating the desing.

  I understand the problem you mention regarding the responsiveness of the design. I see a couple of problems in your code -

  1. Do not set your body to a fixed width, because it will remain fixed at that and will not automatically resize based on your screen size.
  2. Body height, should be a set as min-height : 100vh. So, that at minimum it is 100vh and it can expand if required.
  3. Setting the width of your main container as 45%. The 45% is set basd on the parents width. If the parent is 100px, main will be 45px, if it's smaller, it will get even smaller. Instead set a maximum width, so that the main container will get have a maximum width of let's say 800 pixel. When the screen size shrinks, it will shrink down if possible.

  There are many others, but if you start here. I think you will have a good start. Keep learning, keep coding!

  Marked as helpful

  0

  ---

  

  Matheus Chrispim Pelegrin•30

  @MatheusChrispimPosted over 1 year ago

  @Isfaqul Thanks for your big help! Your tip was enlightening and will help me in future projects.

  0