Design comparison
Solution retrospective
This is my second challenge and I need your feedback, thank you.🤩
Community feedback
- @HassiaiPosted almost 2 years ago
For a responsive content use max-width for .container and .card img instead of a width value. reduce the value for it to match closely to the design.
Give p and h1 the same padding left and right values and either give p a margin-top value or h1 a margin-bottom value . please reduce these values e.g:
.card h1, .card p { padding: 0 16px; or padding-right:16px; padding-left: 16px} .card h1{ margin-bottom: 16px}
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful HAPPY CODING
Marked as helpful1 - @catherineisonlinePosted almost 2 years ago
Hello 🙌🏻 Your solution looks great however here are a couple of things you can improve which I hope will be helpful! 😎
Make sure to use rem (relative length value) or em units instead of pixels for the purpose of “respecting the user preferences”, to say so. It makes the “sizes” of the website fluid according to the zoom/sizes set by the user.
You can read more about it here: https://www.freecodecamp.org/news/what-is-rem-in-css/
Marked as helpful1 - @aashabulPosted almost 2 years ago
- reduce the width little bit in mobile view.
- or use a fixed width lesser than 375px.
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