Design comparison
Solution retrospective
I am happy I was able to work with vanilla css again.
What challenges did you encounter, and how did you overcome them?Just a little challenge with image fitting properly into containers
What specific areas of your project would you like help with?How to fit images into containers properly with css
Community feedback
- @DevonHughesCodesPosted 7 months ago
Hello @DAEM007
Your solution looks really good!
Just a quick piece of feedback from something I noticed. On the active state of the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided for the challenge.
Here's a snippet from my stylesheet for reference:
.container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }
.container:hover { box-shadow: 15px 15px 0px var(--black); }
Other than that, great work and Keep it up!
0 - @mohlimanPosted 7 months ago
Hello and nice job by the way! to fit images in a container, the trick I use most is to give the image a width: 100% and by using percentages it makes it responsive to what ever width your container has and 100% does the job well of fitting your images.
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