Design comparison
Solution retrospective
I'm having trouble with the margins for the profile image. I've made it a block element, which allows me to center it, but then removes the top margin. Any help would be appreciated. Thanks! :)
Community feedback
- @rowanroosterPosted 5 months ago
Try using padding on the
.card
element instead of margin. But, i think if you add even 1px of padding you should start seeing the margins - this is because of margin collapse / stacking margins.if im right, check this article for more on stacking margins: FreeCodeCamp
Hope that helps, but good work! Clean code and I like the comments in the css!
Marked as helpful0@kiaraaa123Posted 5 months ago@rowanrooster Thank you, this was the exact problem! I appreciate your help.
1 - @alberto-rjPosted 5 months ago
👋 Hello @kiaraaa123!
👏 Congrats on investing your time and taking your frontend skills to the next level with the Social links profile challenge.
I have a few suggestions that could help you improve your solution to this challenge.
On line 34 to 38 of your
index.html
file: Ap
element does not have to be directly a child ofa
in this case, instead you could:- Add a title for your unordered list (the title should be visually hidden, as per the design, it should only be available to screen reader users)
- Create an unordered list with a
ul
- Put each
a
inside anli
(and eachli
inside theul
created)
Note: It is recommended to do this, because in this case you have a group of links of the same kind, "your social networks".
Useful resources:
Good practices for your
styles.css
file:Avoid using the unit
px
in your properties. Instead, use therem
unit. This will make the layout scale correctly for people who have a different text size setting. To demonstrate go into your browser settings and change the text size to a larger value like32px
— currently your solution would still be really narrow for those people. But if you userem
it would adjust.Note: The
px
unit is generally recommended more in theborder
andbox-shadow
properties, because these properties do not change in relation to the text size.Useful resources:
Keep learning, coding and sharing! 🌟
Happy coding! 🚀
1@kiaraaa123Posted 5 months ago@alberto-rj Thanks, I appreciate it! I'll review the linked resources and use the new knowledge in my future projects.
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