First solution using Flexbox

Community feedback

• 

  WandoCode•840

  @WandolePosted almost 2 years ago

  Hey,

  For me everything seems fine. It's even well responsive!

  The only thing I could say is about align-items: center; justify-content: center;. They are useless for me.

  Keep it up :-)

  Marked as helpful

  2
• 

  Kyrylo Haiduk•420

  @superpooperxxxPosted almost 2 years ago

  Hey, congratulations on submitting your first project🎉

  Using flex is absolutely OK to center elements and there is actually no "best" solution.

  To center elements inside parent you can also use:

  • margin: 0 auto (works horizontally)
  • position: absolute + top: 50% + left: 50%: transform: translate(-50%, -50%) (parent needs to have position: relative)
  • grid

  But really, flex is the most used now.

  2

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @superpooperxxx Hello! I'm not very agree with your suggestion, using position: relative will make your component cut off on smaller screens, such as in landscape view on a mobile device, you can do the test yourself.

  Everything else looks great!

  @lucasromero26 The only thing I would add to center it vertically is to use min-height: 100vh on the body element, and reduce the margin to 1rem instead of "15rem auto".

  0

  

  Kyrylo Haiduk•420

  @superpooperxxxPosted almost 2 years ago

  @MelvinAguilar I agree, but sometimes flex will not help and absolute positioning is the only solution.

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @superpooperxxx I agree with that! In other cases it is very useful, although in this challenge not much.

  But overall it's a very good suggestion

  1
• 

  Kyrylo Haiduk•420

  @superpooperxxxPosted almost 2 years ago

  Your HTML looks good🔥 Nice and clean.

  • I would suggest not using normalize.css, because you load a lot of stuff, that you don't need. Better create your own file and add there only those resets that you actually need. This fill improve your website loading time

  • Also try to never use anything but class name for styling. Read something about specificity of selectors. So add classes to all html tags and use class as a selector.

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  There is no need to give the body a width value, the value you it gave is the default width value for the body.

  To center .container on the page using flexbox, add min-height: 100vh to the body.

  There is no need for a margin value in .container.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1