Submitted about 2 years ago

3-column preview card component

isaac nabil• 220

@nabil4416

Preview site View code

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

my head is broken, can someone take a look at this test, I started with the creation of the mobile design, then I wanted to switch to the desktop screen, of course using the flex display, and I I found that the first box is smaller than the others, I found myself having to change the width of the desktop design... what do you say about it?

Community feedback

Yehan Nilanga• 690

@Yehan20

Posted about 2 years ago

When you use flex by default the height are same , if you change the align items values to like center, start, end the height may be changed , also make sure there is not extra padding or margin or any fixed height on the boxes , Hope it helps.

isaac nabil• 220

@nabil4416

Posted about 2 years ago

@Yehan20 I have learned this concept well, be careful when I use align-items, this is what caused the problem of inequality of boxes, thank you Yehan very much for your intervention

Faruk Abdulganiyu• 380

@faruking

Posted about 2 years ago

If you still want to use flex, remove "align-items:center;" in the container class(line 85 in style.css). Also, don't forget to style the hover for the buttons.

isaac nabil• 220

@nabil4416

Posted about 2 years ago

@faruking your solution worked well, thank you very much, I forgot to add the hover on the button, I just did it, I'm going to repucher my new test

riverCodes• 300

@riverCodes

Posted about 2 years ago

I think you should use Grid for this, set a width: 100% on the individual cards and use grid-template-columns to create the mobile and desktop layout. An alternative approach would be to create the mobile design first, then set that width to be the max-width of the <main> and the individual blocks. In the desktop design, triple that width, and if all your cards are of the same width, they should slot into place.

isaac nabil• 220

@nabil4416

Posted about 2 years ago

@riverCodes thank you riverCodes for your comment, it is a good idea to use the grid, I will take this orientation into consideration

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