Project build with Css flex and grid

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @FedeHerrera10 👋🏻

  I have some quick tips to help you fix the HTML issues and some other things.

  • Instead of <section>, I suggest using regular <div> for a couple of reasons. First, when you use a <section> you have to have a heading, like h2-h6. Next, <section> is for bigger parts of a layout, such as, contact us about us, image gallery, etc. This will fix the HTML issue, just, don't forget to generate a new report.
  • Next, instead of giving very specific numbers to center the card, I'd suggest using this technique, but first make sure to remove margins from mobile and desktop viewport width.

  body {
      min-width: 375px;
      margin: 0;
      padding: 0;
      font-family: var(--font-primary);
      background-color: var(--Very-dark-blue);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  I made a couple of changes in body. First, avoid using height because it sets a certain value and messes up with the responsiveness, instead try using min-height, it's more responsive, and lets the height grow if needed. Next, I centered the card using display: flex;

  I hope this was helpful 👨🏻‍💻 Other than that, you did a great job, especially with responsiveness, well done. Cheers 👾

  1