Product preview card using html and css only

Community feedback

• 

  Adriano•42,780

  @AdrianoEscarabotePosted 5 months ago

  Hey Michael-Alans, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

  Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

  flexbox:

  body {
      display: flex;
      justify-content: center;
      align-items:  center;
      min-height: 100vh;
  }
  

  grid:

  body {
      display: grid;
      place-content: center;
      min-height: 100vh;
  }
  

  Everything else looks great.

  Hope this helps! 👍

  0

  ---

  

  Michael-Alans•300

  @Michael-AlansPosted 5 months ago

  Thank you so much for the corrections @AdrianoEscarabo . I will put it into practice. Thanks.

  0

  

  Michael-Alans•300

  @Michael-AlansPosted 5 months ago

  Thank you so much for the corrections @AdrianoEscarabo . I will put it into practice. Thanks.

  1
• 

  Opara Kelechi•50

  @riskymindPosted 5 months ago

  Great

  0