Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product-preview-card-component Using Tailwind CSS Grid

@Chaimaejebrane

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am so happy that I finished this challenge. I have learned Tailwind CSS Grid, something that was completely new to me.

Community feedback

P

@ValsCodes

Posted

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

@Chaimaejebrane

Posted

@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

@ValsCodes

Posted

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

0

@Chaimaejebrane

Posted

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

@mkboris

Posted

@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

@Chaimaejebrane

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord