Responsive product card (CSS GRID + SASS/SCSS)
Design comparison
Solution retrospective
Hey guys! This is my first challenge in the platform and I am very excited! I spent sometime have fun doing this one, besides it is simple, I learned a lot.
Feel free to comment anything, I will really appreciate!
Community feedback
- @correlucasPosted over 2 years ago
๐พHello Cristina, congratulations for your solution!
Your solution seems really great, I can see that you've paid attention to the details, the media query works really good. There's only some details you can consider fixing.
Here's my tips:
1.You've added some hover effect that makes the container image grows a little bit and this makes the image pop out from the container, to keep the image inside the container limits use
overflow: hidden;
.2.Here the problem is the opposite of the first tip, you've added
overflow: hidden;
to the class calledcard__image
note that when the container starts to contract, the property overflow makes the text information like the button and price get cropped, if you've addoverflow: hidden
to manage the image borders, you can just useborder-radius
for the left top border image borders.The rest is all amazing, your container is super fluid and responsive.
Congrats!
I hope it helps you Cristina, happy coding!
Marked as helpful0@cristinakellytPosted about 2 years ago@correlucas Hi Lucas! Thank you so much for your feedback!
For sure I had some problems with the
overflow: hidden;
property and actually, I gave a look and I think the problem related to your tip 2 is because this property was added incard__content
, so I fixed this.But for your tip 1, I couldn't figure out how to solve it yet because I added the
overflow: hidden;
and didn't work in this project. I already did this in other projects and it worked well, maybe I am letting something pass. I will give a deep look at this!Anyway, thank you so much, it is really great to have feedback when you are in the beginning!
1@correlucasPosted about 2 years ago@cristinakellyt Happy to hear that Cristina, I've just checked again, and seems that the error comes from this class
@media only screen and (max-width: 37.5em) .card { /* grid-template-columns: 95%; */ }
A quick way to build this layout with two columns is simple giving a
max-width: 900px
for the main container andgrid-template-column: 1fr 1fr;
this way you'll a template with two equal columns and each column automatically with 50% of the main container.Marked as helpful0@cristinakellytPosted about 2 years ago@correlucas Hi Lucas, it is really a more simple way to code this part, thank you!
1
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