Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four feature card section using HTML and CSS

@GraciousNgetich

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Hari Ram 370

@hariramjp777

Posted

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 and grid-column for child elements which specifies number of rows/columns to span.

You can look at my repository

Hope it helps. 👍

0

@GraciousNgetich

Posted

@hariramjp777 Thank you very much.I appreciate the feedback. Let me try that.

1
Hari Ram 370

@hariramjp777

Posted

@GraciousNgetich You're welcome.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

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 GitHub
Discord logo

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