Build it with CSS, Flex and CSS Variables

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout is both good in desktop and mobile and it responds fine in screen resize.

  Regarding you question:

  • Well, it is like what you did in your main element, having

  align-items: center;
  display: flex;
  justify-content: center;
  

  but only applied to the body tag, and you would put the height and width you declared in the .card selector to the main tag. Other way is:

  display: grid;
  place-content: center;
  

  But remember to add min-height: 100vh to the body so that it will center it vertically.

  Using margin: 0 auto on the other hand centers the element with this styling, given that the width of the element varies, or being explicitly given.

  Some suggestions would be:

  • The text below the h1 should be inside a p tag and not just div.
  • The information below the text, those 3 information could have used a ul element, since those are list of information, better to use ul.
  • Lastly, padding to the top and bottom of the body so that it won't touch the ceiling and flooring, especially when you inspect it in dev tools.

  Other than those, this is really great.

  Marked as helpful

  1

  ---

  

  iliwili•225

  @iliwiliPosted about 3 years ago

  @pikamart Thank you very much for your feedback, I will change the suggestions you gave me later on. I'm learning new stuff about how to improve my html and css because of people like you, much appreciated!!

  Just a quick question, what do you mean by your last suggestion about the padding?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @iliwili Hey, awesome that it could be of help!

  About the last, it would be great to add some padding to the top and bottom of the body tag. Because right now, if you try to inspect it in dev tools , you will notice that the layout touches the ceiling(top part) and flooring(bottom part) of the viewport and we don't want that. That is why we add some paddings to those as well.

  Marked as helpful

  1