Design comparison
Solution retrospective
Figuring out the margin-bottom feature to create spacing between elements within
The hover feature was also fun to play with.
What challenges did you encounter, and how did you overcome them?The margin stylings for different parts. Using AI I discovered "main > *" would give me the spacing between elements.
What specific areas of your project would you like help with?For one, I'm stuck on how to properly stack and align the rest of the text to get it closer to the sample given.
How to keep the cursor as a pointer when hovering over the rather than it turning into the text cursor.
I'm sure there are other aspects I'm missing or can improve on.
Community feedback
- Account deleted
Hello Nicholas, I'd be happy to assist you.
- One way to get a closer look at the given design is to match the width of the design to the content, in this case, the card.
- 'main > *' refers to all elements within
main, meaning you assign the same margin to different elements. This can be helpful, however, most have different margins. - To make the cursor appear as a pointer when hovering over an element, add the
cursor: pointerproperty to that element in your CSS.
I hope you find this information helpful. With that, happy coding!
Marked as helpful1@nrmoser50Posted 7 months ago@complic8-coder thank you for the suggestions. I'm a little closer than I was before. How do I get the image to fit nicely inside main like the sample? Also, I'm unsure how to style the font for <p>. Thank you for your help!
0
Please log in to post a comment
Log in with GitHub
Join 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