Responsive product preview card using Flexbox and CSS grid

Solution retrospective
I like how I used CSS grid and Flexbox to get the layout to look how I want as well as make the card responsive with a simple media query.
What challenges did you encounter, and how did you overcome them?Mostly minor issues or things I haven't encountered frequently like CSS properties for strikethrough text, letter-spacing, etc. Also, I haven't dealt much with svg's so adding the cart to the button was new. Using multiple images was something I have read about but not really implemented. I searched for info on the web, but not gonna lie, I used ChatGPT to get most of the information for these items.
What specific areas of your project would you like help with?Not much really. Only two minor items come to mind:
- How to center the cart svg horizontally? Can't seem to get it exactly how I want.
- When the screen changes orientation on the mobile design it looks a bit wonky and stuff spills out of the container.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @yarsvent
Good job! The code is well-organized and you got quite close to the original image. The cursor changing to a pointer is a nice touch To center the cart svg, you can put it in an <img> tag and then include in one container with the text. Then style the container like this:
display: flex; align-items: center;
Worked for me
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