HTML, CSS.

Community feedback

• 

  Gastón Ariel Fauret Caceres•60

  @GastonfauretPosted almost 2 years ago

  Hi! Manuel. Thanks to take your time for watch my code and Always are weel received the suggestions. I follow your suggestuin to use the properties display: grid, height: 100%, place-items: center (in fact I did't know this one) and could see any changes, I have to keep the margin-top to the main to center vertically the div. For sure, There's something I am not doing it properly. The max-width and max-height property behave like in media queries property, right? I gonna to implements in the next challenges. Finally, The fact I use h1, h2, etc, Its because I'm a begginer in Programming so I try to avoid too many divs and start to use semantics tags on HTML, but I read that div are more common to use that semantics tags, Is That Right?

  Thanks Again to take a few minutes to watch my code. I really appreciate the suggestions.

  A big Hug.

  0
• 

  Manuel Brás•110

  @ManuelMadeira98Posted almost 2 years ago

  Hey!

  I had a quick glance at your solution and I have a couple suggestions:

  • Instead of adding a margin top your main element, an easier and cleaner way to center the content would be using grid or flexbox. For example, adding:

  // Allow percentage-based heights in the application. Always use this reset.
  html,
  body {
      height: 100%;
  }
  
  body {
      display: grid;
      place-items: center;
  }
  

  centers your content vertically and horizontally on the page. The place-items property works as a shorthand for align-items and justify-content.

  • I noticed you are explicitly setting the size for each card, I think a better approach would be to wrap the cards with a container (don't do it with main element) and a max-width. This way, this container would evenly control how much the cards could stretch horizontally. Generally speaking, use max-width and max-height on your elements — as opposed to width and height — as they are more appropriate properties when dealing with responsive layouts.

  • There's no need to use h2 with br elements for the content of the card. Instead, prefer a paragraph element. It is a block level element by default and it will naturally horizontally fill your card. Generally speaking, always try to avoid using br elements on your layouts.

  Otherwise it's looking good!

  Happy coding! :)

  0