Product-preview-card-component Using Tailwind CSS Grid

Community feedback

• 

  P

  Ivaylo Ivanov•260

  @ValsCodesPosted 2 months ago

  Yes. Yes, there is a small problem with space between the price and the discount price in the mobile view and it could use a little more padding in general. Size wise everything is okay. The Code is readable, I am just still kind of new to css in general and it's hard to for me get why there are so many overwrites in the css style sheet. It is very much like the Design, well done!

  Marked as helpful

  1

  ---

  

  chaimae jebrane•140

  @ChaimaejebranePosted 2 months ago

  @ValsCodes Thank you for the feedback! The output.css file is where the input.css is built because I used Tailwind CSS for this project. Tailwind generates utility classes dynamically, which can sometimes result in what seems like a lot of overwrites in the stylesheet.

  0

  

  P

  Ivaylo Ivanov•260

  @ValsCodesPosted 2 months ago

  @Chaimaejebrane thanks a lot for the advice. Your solutions really helped me to get this design down big props <3

  0
• 

  chaimae jebrane•140

  @ChaimaejebranePosted 2 months ago

  I don't know why the card was in the middle of the screen in my local version, but in the live version, it's positioned higher up? If you could help with that, I would be very grateful.

  0

  ---

  

  Boris•2,870

  @mkborisPosted 2 months ago

  @Chaimaejebrane That's because the card isn't properly centered, to fix that add a place-content: center; and min-height: 100vh; on the body and remove the margin-top: 5rem; from the main on large screens. Also, to handle responsive images effectively you can use the picture element. This allows you to specify different images for various screen sizes and resolutions. Using CSS to hide and show images to display differently on various screen sizes is not part of the best practices.

  Marked as helpful

  1

  

  chaimae jebrane•140

  @ChaimaejebranePosted 2 months ago

  @mkboris Thank you for the helpful tips! I'll make those adjustments to center the card properly and improve the responsive images. I appreciate the advice on best practices. 😊

  1