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

three column card challenge

@emmecee

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 dont know why the middle card looks like that.... it always looks different on Devtools smh

Community feedback

@MelvinAguilar

Posted

Hello!

The issue with your layout is related to the use of align-self: center; in .third-card, .sec-card, and .first-card. This property attempts to vertically center these elements individually. However, since the middle card has more text content, it becomes taller and distorts the alignment.

Remove align-self: center; in this context

It's crucial to test your solution across different browsers, as the issue might not be apparent in one browser but could manifest in others. For instance, using DevTools in Firefox to simulate a 1440px screen width would reveal the same alignment distortion.

Happy coding!

Marked as helpful

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