Responsive product preview card using BEM convention
Design comparison
Solution retrospective
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
- @ratsagiPosted about 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 helpful1@hellcsabaPosted about 2 months agoHi 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 GitHubJoin 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