Design comparison
Solution retrospective
This looks really simple to do, but I struggled a lot positioning the share icons. I'm proud of not quiting, I almost do.
What specific areas of your project would you like help with?Any feedback is welcome :)
Community feedback
- @leannekeenanPosted 6 months ago
Hi @leonardomzb!
Congratulations on completing the assignment! While you did a great job, I have a few recommendations to help you improve your next iteration:
-
I recommend playing around with the "position" property in CSS. You can set elements to fixed, absolute, relative, or static based on the relation to its container element. Here's what I mean: you can set your container element to relative and then set its child elements to absolute so they are positioned relative to the container. This can help you control the placement of elements more precisely.
-
To assist with the show/hide feature of your tooltip when you scroll over your share button, you can use the "visibility" property in CSS. You can create a CSS selector for your desired element and set the visibility property of an object to "hidden". You can then create another selector for that element's hover using the pseudo-code ":hover" and in that selector change the visibility from "hidden" to "visible".
-
For the spacing issue you mentioned, I recommend playing around with the padding property for your share button. You can set the image within your share element to "flex" and position it using "justify-content" and "align-items" to "center" and increase the padding of the share button to make the space around it larger and keep your image centered.
I hope these recommendations help you on your next build and I hope you reach out to me if you have any questions or want to talk about ideas you think will work.
Happy Coding!
Marked as helpful0 -
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