Product Preview Card Component (Responsive Mobile Design)
Design comparison
Solution retrospective
My second project. Any comments or advice on the code would be appreciated.
Community feedback
- @Marley-SemendePosted 12 months ago
Hi @majdiachour1. Nice work, here is some feedback: Instead of giving your entire .grid container a border-radius at once, you could target the image container and text container seperately and use the border-top-right-radius property for only the top right border and border-bottom-left-radius to target the left bottom radius and the same for the other borders that needs a border-radius. As you can see that by targeting the entire grid container, it gives your inner borders a radius which is different from the original design. try this:
.pic { border-top-left-radius: -- px; border-bottom-left-radius: -- px; } And do the same for the info selector on the right side. You will notice that this will give your design a straight border in the middle as with the original design. I hope this helps. Happy coding:)
1 - @kimodev1990Posted 12 months ago
You could use Clamp( ) method in CSS for responsive design to change size of your elements ( Font, img, div, etc....) according to your viewport size and different layout dimensions to fit with several devices. Other than that, nice work and keep going on.
0
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