Design comparison
SolutionDesign
Solution retrospective
Please provide your feedback.
I actually want to ask, whether giving width
to mockups image
was a good choice or not. and how can I improve that?
also, I have given overflow-x
to body
, but I'm not quite satisfied there.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
COMPONENT MEASUREMENTS 📐:
- The
width: 100vw
property forbody
is not necessary. because it's a block level element which will take the full width of the page by default.
- So feel free to remove
width: 100vw
style rule frombody
this will help you to write efficient code and makes your code more reusable.
MOCKUP iMAGE 📸 :
- Seems like the image got disorted, we can quickly fix it by adding the following style rule
section > img { object-fit: contain; }
- Using
object-fit
property we can ensure our image to prevent from disortion
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1@Tiyana19Posted over 1 year ago@0xAbdulKhalid Thank you so much I didn't know about the
object-fit
property. it helps me a lot.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