Design comparison
Solution retrospective
@correlucas I learned filter property from u, thanks
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Omar, congratulations for your new solution!
Nice that you've add this custom hover! I'm happy to see that, the effect is really cool with your application! =)
You need to improve two things, the image that's not resizing with the card, you can fix that using
overflow: hidden
and addingmax-width: 100%
anddisplay: block
..card { overflow: hidden; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: min(90%,20.4375rem); margin-inline: auto; background-color: #fff; border-radius: 20px; -webkit-box-shadow: 0 40px 40px -20px rgb(13 49 191 / 15%); box-shadow: 0 40px 40px -20px #0d31bf27; text-align: center; }
A good 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 { display: block; object-fit: cover; max-width: 100%; }
๐จโ๐ปHere's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/order-summary-component-vanilla-css-custom-wave-background-hover-tEKUwaT2id
๐ I hope this helps you and happy coding!
Marked as helpful0 - @eby-coderPosted about 2 years ago
Your page is very beautiful and I love the hover styles you added. Wonderful job. I just wish that your CSS code was more readable and structured and not compressed. I had a hard time reading your styles and learning them.
Marked as helpful0@omarsaleh11Posted about 2 years ago@eby-coder sorry about the compressed CSS file I use live scss compiler, and I will upload my scss files instead
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