Four feature card section using HTML and CSS
Design comparison
Solution retrospective
Hi Guys..this is my first challenge on FrontEnd Mentor and am excited to be part of this amazing community. I need your help in aligning the two cards in the second column to lie on top of each other. Your feedback and comments are welcome!
Community feedback
- @hariramjp777Posted almost 4 years ago
Hi @Gracious Ng'etich, Your mobile layout looks good. For desktop layout, you've to use grid with three columns and two rows.
main { /* card container */ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
and then you set
grid-row
andgrid-column
for child elements which specifies number of rows/columns to span.You can look at my repository
Hope it helps. 👍
0@GraciousNgetichPosted almost 4 years ago@hariramjp777 Thank you very much.I appreciate the feedback. Let me try that.
1 - @mattstuddertPosted almost 4 years ago
Hey Gracious, welcome to the community 👋 I hope you enjoyed your first challenge!
Your live preview URL seems to be incorrect at the moment. I'd recommend working through our guide to submitting solutions and try updating the URL. You can update your solution by going to My Challenges in your profile and click the challenge. This will take you through to the challenge hub. From there, click Update Solution in the menu at the top and you'll then be able to update your solution details.
Once you've added the correct URL, you can generate a new screenshot (the button below the design comparison above) to take a screenshot of your project.
Let me know if you have any questions or need help updating your solution. I look forward to seeing your project!
0
Please log in to post a comment
Log in with GitHubJoin 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