Submitted 3 months ago

Responsive product preview card using Flexbox

accessibility, pure-css, bem

Michael Okorie•150

@Michael-Okorie

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

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

I’m proud of how clean and responsive the design turned out across both mobile and desktop screens. I followed a mobile-first approach and used Flexbox to build the layout. If I were to do it again, I’d spend more time polishing the desktop view and maybe try using CSS Grid for more layout control.

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

One challenge I faced was aligning the image and content side-by-side properly on larger screens. There was extra whitespace at the bottom which took time to debug. I eventually solved it by reviewing how flex containers behave with height and object-fit. Also, getting the button icon and text centered perfectly took a bit of tweaking with Flexbox alignment properties.

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

I’d love feedback on:

How to improve the layout on large screens more efficiently.
Best practices for responsive typography.
Whether my use of Flexbox is optimal or if Grid would be better.
Any improvements to the accessibility of the button or general layout.

Code

Please log in to post a comment

Community feedback

P
Atif Iqbal•3,320
@atif-dev
Posted 2 months ago
Hi Michael Okorie, congrats🎉 on completing the challenge.

You nicely completed the challenge.

I would like to highlight two points:
- To avoid accessibility issues, follow a semantic structure. Following is a sample structure of semantic layout:
```
<body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
- Since we tackle responsive design in challenges so it is preferred to use em unit for padding and margin and rem unit for font-size. For further info watch this video.
Hope you will find this Feedback Helpful.

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