Skip to content
Submitted 2 months ago

Responsive product preview card using BEM convention

Csaba Hell•180
@hellcsaba
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This is my first project where I used Block Element Modifier (BEM) convention and Mobile-first workflow. In my opinion, the project was too small for experience the benefits of BEM but it was a good opportunity to get familiar with the concept.

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

In desktop view at the bottom of the image I could see 4pixels of the background. After some research I managed to resolve it by setting the display to block. Moreover, previously I followed desktop-workflow and now it was more difficult to do the other way around, especially the alignment of the screen sizes.

Community feedback

  • Sagi•120
    @ratsagiPosted 2 months ago

    Hello there,

    Congrats on completing this chellenge!

    I have some suggestions to improve your solution:

    • I noticed that you named main landmark as a product actually it is not correct because product card is a small part of it. this main landmark might have multiple of them so the correct way to use article or just a div therefore it should be h2 not h1 more details you can find here
    • Vertical alignment doesn't work on mobile version because you have forgotten to provide the min-height: 100svh for the body.

    Overall solution is good!

    Hope you find this feedback helpful!

    Good luck!

    Marked as helpful
    1
    Csaba Hell•180
    @hellcsabaPosted 2 months ago

    Hi Sagi,

    Thank you very much for your feedback. I will take a look on my code and review it according to your suggestions.

    Good luck too!

    0

Please log in to post a comment

Log in with GitHub

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