Looking to hire developers?
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.
@codezeloss
Posted
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
Posted
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
Posted
Good job Hassan!! A tip: to get your grid solution center on the page, you can add:
If you add those lines to your grid container, your solution will appears as the fronted mentor solution.
KEEP GOING
Marked as helpful
@Abdallahhassan186
Posted
@elosscode Thank you sooo much! that was super helpful and worked out well after implementing!
@Abdulla220
Posted
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
@Abdallahhassan186
Posted
@Abdulla220 Thank you! This is a really helpful tool
@vikrantmalla
Posted
Marked as helpful
@Abdallahhassan186
Posted
@vikrantmalla Thanks a lot! That worked out great!
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
