React Product Preview

Community feedback

• 

  Alin Costea•190

  @CosteaAlin93Posted over 1 year ago

  Hi Pulkit! Overall, it looks good. A few hints for the design:

  • try surrounding the root element into an <main> element so you avoid the 'Document should have one main landmark' error
  • the image-container element, could be a bit smaller in width to keep the proportions as a whole
  • the image is too stretched, perhaps background-size: contain; will fix it looking more like in the solution
  • the font-weight of the h2 could be ticker
  • the span containing 'CHANEL ' text, didn't have to be green
  • a bit ticker font on the price
  • and don't forget the little icon on the 'Add to cart' button :)

  On the Mobile view:

  • image is perfectly set
  • for the content part, you could increase the height a bit, or the spacing between the individual elements

  Considering you are using Tailwind for this, my advice would be:

  • always start designing with the 'mobile-first' design in mind
  • once the above looks on point, start using 'md:flex-direction:row;' etc, for styling for the 'Desktop view'

  Keep the solutions coming! Planning to do your approach once I start learning a bit or React!

  Marked as helpful

  1