Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Yunus Emre, congratulations for your new solution!
Your component is perfect, but its not responsive yet. You need to fix the container and also the image replacing the
width
withmax-width
. Note that the difference between these two properties is thatwidth
is fixed, example,width: 340px
is an container that doesn't get bigger or smaller than340px
butmax-width: 320px
have the maximum of340px
and can contract when the screen scales down and adjust its size.To make your image fully responsive adddisplay: block
andmax-width: 100%
andobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
👋 I hope this helps you and happy coding!
Marked as helpful1
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