Responsive Product Review Card CSS

Solution retrospective
I used this challenge as more of a learning challenge. There were new concepts in here, and I wanted to learn better practices based on a professional. I watched Kevin Powell as a guide, and it was incredibly helpful. I feel much more confident in my markup now. I learned to create a responsive webpage for mobile and desktop using flexbox and grid. Using <picture> is a great tool to add multiple img files that can be used for different screen sizes. I learned better ways of organizing elements too.
This challenge tested me quite a bit with figuring out how to make it responsive. I realize that vertical and horizontal card are the same and it depends on the width of the screen and the max-width you set. I spent quite a bit of time trying to make two separate "cubes" to put next to each other, but I learned quickly they did not maintain interaction how I intended.
I'm still struggling with bringing the contents into the center of the page. For the last challenge I was given helpful advice of removing padding and margin to utilize the flexbox potential. It worked for that one, but for this challenge I could not figure it out.
I would love some advice on that.
Edit: With some helpful advice (a reminder as well) I got it centered! Should stick in my head this time.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Anthony Licata's solution.
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