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

3-column preview card component Using HTML & CSS

Fadi 145

@nofear1985

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I like feedbacks, in this way i can improve my front-end abilities! feel free to give me good constructive feedback.

Community feedback

dewslyse 3,025

@dewslyse

Posted

Hi @nofear1985, the card in design is not perfectly centered, at least not vertically. The top margin is a little bigger than the bottom margin. You may need to offset the card from the top for it to be at the same level as the design.

You could try apply a transform: translateY(10%) to your .container selector to see if it helps. You may want to try different percentages though.

Don't forget to generate a new screenshot when you make any change to your code.

Marked as helpful

0
spyder 315

@ratan17

Posted

you could have used flexbox for centering your cards

Marked as helpful

0

Fadi 145

@nofear1985

Posted

@ratan17 I used flexbox for centering Card but its still not centerd in Design Comparison !!

0
spyder 315

@ratan17

Posted

@nofear1985 ohh you did ? tell me in which file is it so that i can see why isnt the cards centering

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