Product card using HTML and CSS
Solution retrospective
It's not like I'm proud really. I try to return my skills. Not like I had much before :) I want to think more clearly about structure of pages. How to make it more
What challenges did you encounter, and how did you overcome them?I didn't know at first how to manage different sources of one image. I found a solution to use <picture> with <source> inside it.
What specific areas of your project would you like help with?When should I choose flex over grid? Is there a way to handle confusion about sizes of elements more clearly?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @VeyronShark
I noticed that you changed the display of the main card from flex to grid using media queries. I think you did that because simply changing the flex-direction to flex-row caused some uneven space occupancy by the components. But that can be solved by simply giving both components a width of 50% in the media query, just as the flex-direction changes to row. The main advantage of flexbox is the responsiveness compatibility. It's a unique solution, what you did, but i don't think changing the display was the best solution. I would suggest that you understand how the flexbox elements automatically adjust sizes.
Marked as helpful - @Md-Mubin
It is just your preference. Like I have never used grid. Only flex. But, it is working for me. One of my friend prefers grid over flex. Still ok and working. Just use what you are more comfortable with. No hastle.
Marked as 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