sign up with succes message, responsive design

Community feedback

• 

  Tomás Pereira•510

  @TomasPereira-DevPosted about 1 year ago

  Hey, what's up?. I just check your code and found a few things that can be improved. About padding, there is a really easy and cool property to create space between elements in a flex container, it's called gap, it will change your life, trust me :).

  I saw that you added width to the img container, in this case you don't need it, think about the img as the main force that decides how big the container should be, that's why you had a very big white space at the right.

  The last thing I would change is about how the alignment, I saw that you added width and height to the body to align the elements to the center, that's ok but it misses something important, if you are going to use the 100% method to center it, the parent element of that element needs to be 100% too!, think that when you are telling css that you will use height: 100%, css thinks "100% from what?", so it checks the parent element, if it doesn't have a declared height it will not work :/, so when you add it to the body, it should be like this:

  body, html{
      height:100%;
  }
  

  you don't need to add width: 100%; because the width will be always 100% by default

  now if you want to align the container to the center, because you used flexbox you can do the following:

  .main{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
  }
  

  with this now aligned you don't need the margin-top: 7rem, you should never use margin for things like aligment.

  I really recommend you to use this chrome extension, it adds rulers to the screen, with this you can see things like paddings more clearly.

  Check out my code for this challenge here if you want to see an example of this tips in action and also other cool things I didn't wrote here, good luck!.

  Marked as helpful

  0