Submitted 9 days ago

Product preview card component

jaysonalfie• 50

@jaysonalfie

Preview site(opens in new window)View code(opens in new window)

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 happy that I got a chance to learn new things such as how to arrange my html to give the page great structure and also I got to learn new tags. It was also greate upgrading from using CRA to Vite when creating the react application. I was also able to add a bit of code to my CSS reset.

What challenges did you encounter, and how did you overcome them?

Still approaching the application from mobile first is a challenge but I will still look more into it and figure it out. I was able to take time around it but I had to design for desktop first to be able to then change it into mobile.

What specific areas of your project would you like help with?

Any feedback will be highly appreciated and also feedback in regards to mobile first approach and also styling techniques.

Community feedback

Huy Phan• 1,360

@huyphan2210

Posted 9 days ago

Hi, jaysonalfie

I saw your solution and had some feedback:

It seems to me that you’re using a media query with a minimum width of 375px for the desktop view. This causes mobile devices with viewports larger than 375px to display incorrectly. I suggest increasing the minimum width

Hope this helps!

Marked as helpful

jaysonalfie• 50

@jaysonalfie

Posted 8 days ago

@huyphan2210 Thank you for the feedback. I have looked at it and will be sure to add the min width to accommodate more small screen devices. Truly appreciated.

Please log in to post a comment

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