Design comparison
Solution retrospective
I cant really say, it has really been challenging, i stayed the longest on this project, really had a hard time on the grid layout and bringing the cards together in that way, did try something but it felt wrong to do it that way.
What challenges did you encounter, and how did you overcome them?The grid layout was my major challenge, i combined the grid layout and positioning, i was not really sure it was going to work out at all, but it somehow did.
What specific areas of your project would you like help with?i would return and take more lessons on css grid, but it was really challenging, then ill do a refactor of the code and design.
Community feedback
- @hamzafrontendPosted 3 months ago
Its no doubt a really good try, follow mobile design first approach, make the main tag display grid for small screen and for bigger screen make 3 columns using grid-template-column and make 3 cols, inside the main place 2 individual cards, and remaining 2 cards wrap them in a div and then put these 3 divs inside a main, and on big screen when you have 3 columns the desired layout would be ready, you could check my solution on my profile as well, if you want any help, feel free to message me.
Thanks, Hamza N.
Marked as helpful0 - @MikDra1Posted 3 months ago
Nice one 😀
If you are curious how you can do this straight lines on the top of each card here is my tip:
Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.
Hope you found this comment helpful 💗
Good job and keep going 😁😊😉
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