Design comparison
Solution retrospective
Hello, Frontend Mentor Community! 👋 I have submitted my first challenge and I am very excited to receive feedback on how I have performed.
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.
CSS 🎨:
- Looks like the component has been centered properly. But the issue is the content inside the
body
causes overflow on smaller screens and let people scroll the content, this issue want to be cleared.
- This is just caused by over default
margin
applied by browsers, we can usemargin
if necessary but in this project there's no need to use it
- Now set
margin
forbody
in css, after setting you can able to see the changes
body { margin: 0; }
- Now the overflow of content has been cleared
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @HassiaiPosted over 1 year ago
To center the main on the page using flexbox, replace the height in the body with min-height: 100vh.
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
For a responsive content,
- Replace the width in the main with a max-width and the height with a padding value for all the sides.
padding: 16px which is 1rem/em
- Give the img a max-width of 100% and a border-radius value, the rest are not needed.
Give h1 and p text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0 - Replace the width in the main with a max-width and the height with a padding value for all the sides.
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