Design comparison
Solution retrospective
I am happy that I have completed another challenge. I can see now that I should have used a mobile first approach, next time I will work from a mobile first design and add media queries to accomodate larger screen sizes. I did it the other way around here.
What challenges did you encounter, and how did you overcome them?I struggled to resize the image and keep the border radius. Every time I tried to resize it in the media query, the border radius was not work but after I used object-fit it worked. I've probably learned this in tutorials but this challenged helped me use that knowledge and I am more likely to remember it for future projects.
What specific areas of your project would you like help with?Nothing specific other than I hope my speed picks up over time, which I am sure it will!
Community feedback
- @Grego14Posted 7 months ago
Hello! 🎉 congratulations on completing the challenge! 🎉
To prevent .attribution from causing overflows you can set its margin-top to margin-top: auto;
You are changing the styles of the image using header img when it has a class and you can use it for that.
So that the image is not wider than its container, I recommend using min-width: 100%; and not width: 33.6rem;
I recommend using a span or a p element for the 'tag' and not an h1 element, you should use the h1 element instead of the h2 for the title.
I recommend using transitions for what you need, and not for 'all'
transition: box-shadow 0.3s;
I don't recommend using a fixed height, since it can cause overflows like in the author's element, but you can use min-height: 52.2rem; so you make sure that that is the minimum height, but that it can also grow if necessary!
I hope this helps! 😁
Marked as helpful1@inappdesignPosted 7 months ago@Grego14 Thank you! I will implement these changes on my next upload.
1
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