Design comparison
Solution retrospective
This is my 3rd challenge but it seems the hardest, I feel my code are not optimized enough. for e.g. it was difficult for me to align the Avatar and other text to center and I've been using a lot of margin code. Just wondering if theres a better way to center align those stuff without manually doing a margin.:) Thanks!
Community feedback
- @MelvinAguilarPosted over 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
Metadata ๐๏ธ:
-
The
viewport
meta tag is missing. theviewport
meta tag is used to control the layout of the page on mobile devices. Add theviewport
meta tag to the<head>
tag:<meta name="viewport" content="width=device-width, initial-scale=1.0">
.You can check your solution on a mobile device to see how your solution is distorted by not using this tag. โ ๏ธ
CSS Reset ๐:
I'm sorry I can't help you much with the margins, I can only advise you to start with a CSS reset because each element like paragraphs and
h3
have a default margin that takes up space.-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! ๐
Happy coding!
Marked as helpful2@nzcastilanPosted over 1 year agoThanks @MelvinAguilar I'll have a look at those articles and refactor my code :)
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