Design comparison
Solution retrospective
Ok, I have 2 questions for the community.
I based this card on a grid layout. The right part of the grid (containing the image), scales when resizing but the image's proportion gets smaller while the left part pretty much stays the same. (If you don't get what I'm saying, please try resizing the webpage given in the view code section.)
Next, I created a div that overlaps the img for the color. The container and the div works correctly but if you notice closely, the img leaves a small space on the bottom. I've given scaling to 100% but there is always some space on the bottom where the img is.
Please provide guidance to these queries. Any other suggestions are also welcomed!
Community feedback
- @munyite001Posted over 2 years ago
Also try experimenting with height 100% to see how it behaves
0@MugeshTRGPosted over 2 years ago@munyite001 I've tried experimenting with width and height. It scales perfectly, but the other part doesn't.
0 - @munyite001Posted over 2 years ago
Hey @MugeshTRG
I see what you mean, if you are using a grid layout, and assuming you'll have two divs for the text and the image, you could just set the width of the image to 100%, so that it will always match the width of its parent div
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