3 column preview card component with HTML and CSS

Solution retrospective
Hi, everyone! I didn't have any significant difficulties with this challenge, so I have nothing specific to ask about. However, if you have the time to check out my solution and give me any pointers on how to improve my code, I would appreciate it very much. :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Greetings, Kristina225! 👋
Good job on this challenge! 👏 Your solution looks pretty good! 😀
Like Melwyn mentioned, it would be worth switching to a mobile layout a little sooner in your solution so that the height of the card doesn't increase dramatically and the content inside look rather squished shortly before the layout changes from desktop to mobile.
Another tip—it's generally recommended that you only use one
<h1>
tag per page (since that's better for semantics and SEO). I think the headings in this challenge would be fine as<h2>
or<h3>
. 😉Hope that helps. 🙂
Keep coding (and happy coding, too)! 😁
Marked as helpful - @melwynt
Hello Kristina,
The desktop version is nicely done.
However you might want to check again the responsiveness for the mobile version. I think there is an issue with the height of the container or card because the site is partially truncated. A media query with the correct pixel width will most likely resolve this.
Happy coding!
Marked as helpful - @wendyhamel
Hi, your desktop solution looks great! Very much like the design. The mobile version needs some more attention I think.You can't scroll the page, so the other cards can not be viewed. You also need to adjust the rounded corners. For example; in your solution the right upper corner of the first card is not rounded on mobile.
Have fun improving and with other challenges!
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