3-column preview card
Solution retrospective
couldn't do the mobile version nor adding round edges to the container, I really need some advice with dimension and creating a pixel-perfect-interactive design. Any advice about this or even topics to lookup would be really appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @codezeloss
To get rid of the accessibility/HTML issues shown in your Report: Wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more
Marked as helpful - @zastar23
To get the mobile design, add a media query at 600px (in your case) and change de flex-direction of the container to column, add a width to the container of 80% perhaps, and a max-width of around 20 rem or so to not let the cards stretch so much that it becomes hard to read the text because of the long text lines, and maybe you need to add a bit o padding too to the cards.
Hope this helps, happy coding!
Marked as helpful - @codezeloss
Good job Hassan!! A tip: to get your grid solution center on the page, you can add:
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
If you add those lines to your grid container, your solution will appears as the fronted mentor solution.
KEEP GOING
Marked as helpful - @Abdulla220
First ,you can make a div and put three divs in side it each one is card ,for button you can use button generator in google
Marked as helpful - @vikrantmalla
- Add border-radius on box div(eg:- border-bottom-left-radius), not on container div.
- For the mobile version add a Media query.
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