3-column preview card component
Solution retrospective
Got some awesome feedback from @correlucas! Aligned the body element in the center, rounded only the outer corners of the card layout. (the Figma design comp got funky with the corners compared to the clean indication of how the corners should be from the JPEG). I adjusted my media query so the row wrap appears starting with tablet sizes bc that makes sense for this small build.
I also added a descriptive invisible header to improve my accessibility with screen readers :)
Please give me feedback, I LOVE learning new things and I am already seeing some amazing ways to tackle this simple challenge!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
Hello Tauri! How are you? Congratulations for your solution.
You said you're interested on other people solution, so here is mine, note that I've changed a lots the design and I played with the hover, dont consider the design if is ugly in comparison the original 😂:
https://www.frontendmentor.io/solutions/3-column-preview-card-vanilla-css-custom-design-and-hover-states-e5uAfmUT71
- You probably know that, but you've missed three properties to center the container:
body { height: 100vh; display: flex; align-items: center; }- Note that the border-radius isn't the same for all cards, the central one in the desktop version doesn't need border-radius since its in center. For the mobile design the card 1 needs
border-radiusonly on top and the opposite for the card 3.
I hope it helps you, welcome to Frontend Mentor community! 😊
Marked as helpful
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