Design comparison
Solution retrospective
Finally I was able to achieve a responsive website. I had tried a couple of new things like using CSS Variables, Media Query and also dynamically changing images using display property.
I am looking for some feedback about the code, so please do check my code out.
Community feedback
- @correlucasPosted over 2 years ago
Hello Gaurab Bhowmick, congratulations for your challenge solution!
Your product card seems really accurate, but there's three aspects you can consider to change in your CSS.
1.Apply
max-width
instead ofwidth
to create a flexible container in a width under the percentage you set as width that's a fixed value.2.Fix your card-image behavior on mobile, the image is stretching so you can have a little more responsive adding two properties that will have a better fit and will not let your image stretch. Using
object-fit: cover;
to keep your image inside the container limits andobject-position: center;
to choose where the image will be position while the card become smaller. Code below:.cardimage {object-fit: cover; object-position: center;}
3.There's a red border around the container, maybe you did on purpose, but if is not the case, you can remove it from .mainsection or just delete the border property:
.mainsection {border: none;}
Try that and say me if works. I hope this can help to improve your solution. Keep it up.
Marked as helpful1@Gaurab019Posted over 2 years ago@correlucas Thank you for your detailed feedback
the red border i had drawn to understand the layout but later forgot to remove.
I didnot know about max width so i had to create multiple media query. I will look into it and update my solution.
Like max width I didnot read much about the image fitting properties......I will use the object fit as well and read about it.
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