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

Frontend Mentor - Perfume card

@DavidIrvine-TW

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


My 2nd Frontend Mentor challenge.

Like the 1st challenge, I enjoyed coding this one also. It was a little more challenging than the 1st one (QR code) due to the responsive design.

Any feedback welcome!

Happy coding! :)

Community feedback

@sarahsoaressilva

Posted

Hello, David!

Great job! Just one thing that I saw, when using devices with 375px width (IPhone SE if you use inspect elements on the browser), the footer text overlap the card. I believe that is because "position: absolute" and "bottom: 0".

If you want the text to stay in the end of the card, one solution is that you can use "padding: 3rem" and remove bottom and position properties. But it's just a suggestion. I hope this can help.

Happy Coding!

0

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