Submitted 3 months ago

Responsive four card feature section

Myriam•120

@myriamnguyendevweb

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud to have practiced responsiveness and how to properly float elements because I know that I often have difficulty with elements when I float to the right or left.

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

What was complicated was making it responsive, because I didn't have enough practice in my frontend web development courses. Since I don't practice coding enough, I lose my habits.

For this I did some research which helped me with coding and understanding how it works.

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

I would like to allow those who need to correct their project if they are having difficulty. Also, I would like those who did the project and who would like to correct me, this will help me improve in what is more difficult for me.

Community feedback

mashofa•350

@mbank14Posted 3 months ago

Hello, very good code! I would like to give a suggestion for the desktop view. You can use a grid layout for the desktop view by utilizing grid-column and grid-row on each child of the parent grid. However, before that, the margin on each card should be removed first to make the modification process easier.

.flex-container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr); 
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

#card.card {
  grid-column: 1/3;
  grid-row: 2/4;
  width: 100%;
}

.card.rouge {
  grid-column: 3/5;
  grid-row: 1/3;
  width: 100%;
}

.card.jaune {
  grid-column: 3/5;
  grid-row: 3/5;
  width: 100%;
}

.card.bleu {
  grid-column: 5/7;
  grid-row: 2/4;
  width: 100%;
}

Marked as helpful

Myriam•120

@myriamnguyendevwebPosted 3 months ago

@mbank14 Thanks for the suggestion. This will help me a lot.

Please log in to post a comment

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