Submitted 3 months ago

Four Card Feature Section

EuginiaM•190

@EuginiaM

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm happy that I've finish the project. I need suggestions for improvement

What challenges did you encounter, and how did you overcome them?

I encountered challenges on the grid layout for desktop design

What specific areas of your project would you like help with?

I'm not sure if my media query breakpoints are correct, I need help on them.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Eniola•240
@Enilolade
Posted 3 months ago
Well done, nicely done. Curious why you had a dark colour for the background of the body tho?

So, for your grid layout on desktop, instead of 1 row, you could have 4.
```
.parent {
grid-template-columns: repeat(3,1fr)
grid-template-rows: repeat(4, 1fr);
}
```
Then the children could be split this way
```
.green-card {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }

  .red-card {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .orange-card {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
  }

  .blue-card {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
  }
```
For the most part, your media query is fine for this design, at least. because the layout only changes at >= 1024px.

Very neat, nicely done.
Marked as helpful

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