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
Request path contains unescaped characters

Submitted

HTML and CSS

@zlatan-cic

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'm most proud of successfully implementing a responsive design that looks great on both mobile and desktop devices. 📱💻 However, next time, I would spend more time planning the layout to avoid any last-minute adjustments and ensure a smoother development process. 📝🔧

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

One of the main challenges was ensuring the layout transitioned smoothly from mobile to desktop. Handling the image display and making sure the elements aligned correctly on larger screens was tricky. I overcame this by using media queries and Flexbox properties to manage the layout changes. However, I still haven’t fully mastered the transition from mobile-first to desktop, so there’s room for improvement in my approach to responsive design.

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

I would appreciate help with refining the transition from mobile-first to desktop layouts to ensure a smoother and more consistent design. Additionally, any tips on optimizing Flexbox usage for better alignment and spacing would be valuable. Guidance on improving the overall responsiveness and performance of the page would also be greatly appreciated. 😊

Community feedback

Account Deleted

Hi, congratulations on completing the challenge!

Your design is very good. But on decreasing the height , the main card is not displaying correctly .Try to use , .. it will solve the problem. body{ min-height: 100vh; }

I hope it helps you!

Have a nice coding!

Marked as helpful

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