Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I redid it to use clamp()
and also use mobile-approach first.
None
What specific areas of your project would you like help with?Any general code feedback would be appreciate it especially with the way I handled responsive design using width
, max-width
and medai queries.
Community feedback
- @DarkstarXDDPosted 5 months ago
- The
align-content
property on the.card
has no effect. Change it toalign-items: start
. It will make the child elements' width only as large as the minimum width they need. Now, because the "Learning" element won't take the full width of the card, you can remove themax-width
property on thecard-tag
media query. It's not needed anymore. - After doing the above you will have to give a fixed width for the profile picture image. Otherwise it will be much smaller.
- You don't need to wrap the
<img>
element in a extra<div>
. Having only the<img>
element is fine. Make sure in the CSS reset you havedisplay: block
andmax-width: 100%
for the<img>
element.
Marked as helpful1 - The
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