A responsive product page

Community feedback

• 

  Adriano•42,800

  @AdrianoEscarabotePosted 4 months ago

  Hi AnaghaInowei, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

  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;
  }
  

  The rest is fantastic.

  Hopefully, you'll find it helpful. 👍

  Marked as helpful

  1
• 

  Vincenzo Vitello•100

  @vincenzo-vitelloPosted 4 months ago

  I had some troubles with sizing so first thing I notice is that you didn't, seems very good. The only thing: I think you would have needed some more letter spacing and a bit more of the line height. The code is very clean and legible but in the css I think you could have been writing less lines with just a few adjustments. Keep grinding my friend!

  Marked as helpful

  0

  ---

  

  AnaghaInowei•110

  @AnaghaInoweiPosted 4 months ago

  @vincenzo-vitello Thank you for pointing that out I really appreciate it. I'll strive to do better.

  0