Design comparison
Solution retrospective
I am the most proud of how naturally the solution came together as I was developing it. I feel like I made it through this challenge more efficiently than the first one. If I were to do it differently, I would probably put the attribution into a footer tag rather than in main with the rest of the content.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was getting the margins around the title and the rest of the flex containers to align properly. I overcame this by adjusting the height of the title container to suit the spacing of the card.
What specific areas of your project would you like help with?I definitely need to work on making the responsiveness better. I have media queries, but I feel like it can still behave a little wonky when the viewport shrinks and grows.
Community feedback
- @Alex-Archer-IPosted 5 months ago
Hi there!
You really have not to wrapping every element into the flex wrapper. In the big projects with a lot of content such approach could be very complicated =)
You can style them directly and create spaces via
margin
orpadding
.<h1 class="title">Title</h1> <p class="text">First paragraph</p> <p class="text">Second paragraph</p> .title { margin-top: 1rem; } .text { margin-bottom: 0.5rem; }
Or, since your container already has
flex
, you can usegap
property to create gaps between it's inner tags.Of course, if you just want to train your flex skills or it's some new interesting technique, just ignore all that above =)
Also I recommend you to use
rem
for thefont-size
properties. It can help users if they want to change their font size settings. To help you calculate value - by default1rem = 16px
.Anyway, quite a neat and accurate work (especially comments in code) and cool shadow-hover effect! Well done, keep going =)
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