
Solution retrospective
most proud of how well I managed to mimic the site
What challenges did you encounter, and how did you overcome them?I had trouble adding round corners to the svg at first but after putting the svg in a parent div, adding border-radius to the parent div and setting the image to (object-fit: cover) my issue was solved.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@huyphan2210
Hi, @Kenpachi-bit
I’ve seen your solution, and I’d like to share some thoughts:
1. Simplifying Your img Structure:
I noticed your
img
(yoursvg
) is wrapped in a parentdiv
. This setup is a bit more complex than necessary. You can simplify it by removing the parent div and applying styles directly to theimg
. For instance:Instead of this:
<div class="image-box"> <img alt="" src="assets/images/illustration-article.svg" class="image"> </div>
You can simplify it to:
<img alt="" src="assets/images/illustration-article.svg" class="image">
2. Adjusting the CSS:
In your CSS, you can style the
img
directly:.image { width: 100%; border-radius: 15px; /* Add the border-radius */ /* Remove unnecessary styles */ /* height: 100%; */ /* object-fit: cover; */ }
Hope this helps!
- @Jaweria321
Good Job
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