Lucas 👾• 104,420
@correlucas
Posted
👾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 with max-width. Note that the difference between these two properties is that width is fixed, example, width: 340px is an container that doesn't get bigger or smaller than 340px but max-width: 320px have the maximum of 340px and can contract when the screen scales down and adjust its size.To make your image fully responsive add display: blockand max-width: 100% and object-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 helpful
1
