Design comparison
Solution retrospective
The responsiveness of the images. I utilized the `` to achieve the smooth transitions of images between breakpoints, without the need for additional css.
What challenges did you encounter, and how did you overcome them?There is a little shift in the right side of the card in desktop version. I reduced it by utilizing grid instead of flex.
What specific areas of your project would you like help with?Even though I managed to reduce the shift in height of the right side of the card in desktop, the element there does not cover the entire height of the card. I assume the image has some hand in this and I am not sure how to handle it so that both grid items can have the same height.
Community feedback
- @suzzy-dszyPosted 2 months ago
-
Your solution closely matches what is expected great job on that, and as for the issue you have highlighted, I was having the same problem and you are right to assume that the image influences your output.
- To have the right hand grid-items to take up more height, try using the css
clamp()function in your media queries, this will allow your font to dynamically scale with the viewport width to help achieve the look that you want. You may want to read a documentation / watch a video on the property as it is a bit much to understand exactly what's happening at first.
- To have the right hand grid-items to take up more height, try using the css
-
If you don't mind, could you review my solution to this challenge as well? I followed a mobile first approach and when it came to achieving the required desktop looks i failed at that as my product card is really big on larger screens and alas i couldn't figure it out. Any help will be much appreciated 🙏.
-
Otherwise Good job 🙂👍.
0 -
Please log in to post a comment
Log in with GitHub
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