Design comparison
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.
Community feedback
- @codezelossPosted almost 3 years ago
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 helpful2 - @zastar23Posted almost 3 years ago
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 helpful1 - @codezelossPosted almost 3 years ago
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 helpful1@Abdallahhassan186Posted almost 3 years ago@elosscode Thank you sooo much! that was super helpful and worked out well after implementing!
1 - @Abdulla220Posted almost 3 years ago
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 helpful0@Abdallahhassan186Posted almost 3 years ago@Abdulla220 Thank you! This is a really helpful tool
0 - @vikrantmallaPosted almost 3 years ago
- 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 helpful0@Abdallahhassan186Posted almost 3 years ago@vikrantmalla Thanks a lot! That worked out great!
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