Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Damian, congratulations for your first solution! ๐ Welcome to the Frontend Mentor Coding Community!
๐ Great start and great first solution! Youโve done really good work here putting everything together, Iโve some suggestions you can consider applying to your code:
1.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add
max-width: 100%
and add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { /* padding: 10px; */ max-width: 100%; /* width: 275px; */ /* margin-top: 20px; */ border-radius: 15px; display: block; }
Here's your code fixed:
.card { padding: 16px; display: flex; font-size: 15px; max-width: 320px; background-color: hsl(0, 0%, 100%); text-align: center; /* padding-bottom: 20px; */ border-radius: 15px; font-family: Outfit, sans-serif; box-shadow: 0px 10px 20px -20px; flex-direction: column; justify-content: center; align-items: center; }
2.Your component is perfect, but its not responsive yet. To fix this behavior all you need to do is replace the
width
withmax-width
. Note that the difference between these two properties is thatwidth
is fixed, example,width: 320px
is an container that doesn't get bigger or smaller than320px
butmax-width: 320px
have the maximum of320px
and can contract when the screen scales down and adjust its size.โ๏ธ I hope this helps you and happy coding!
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