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

Responsive product preview card

@Tiwari0808

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@antimatterhut

Posted

I think you should redo this one or spend time reworking alot of this. The CSS code seems very complicated, with some elements having 11+ properties. You did 2 things somewhat correctly here, in that you have a mobile version that looks kinda like what they wanted, and you have the general *shape of the desktop version in that you have the picture on the side with the text to the right. The code completely breaks between 375 and 1440 px. Also, you should try to make the code look exactly like the original, or pretty darn close. The desktop needs a bunch of stuff moved around and styled diferently, the mobile needs a few adjustments. I would do some research on how media queries work bc I think you might have a fundamental misunderstanding there. Once more, as I make my screen larger between mobile to fullscreen, the code completely breaks. Best of luck, hope you retry it, or edit it to make it better.

Marked as helpful

0

@Tiwari0808

Posted

hey @antimatterhut , Thank you for your detailed feedback. I appreciate your insights and will focus on simplifying my CSS and improving media queries. I’ll rework the design to better match the original and ensure it transitions smoothly across different screen sizes.

Thanks again for your guidance and support!

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