Skip to content
Submitted over 2 years ago

Card 3 columns

Stalin•410
@StalinAM
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, this is my solution for challenge, I look forward to your comments for further improvement. Thank you

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Stalin! 👋

    Congratulations on completing this challenge! 👏

    Here are some suggestions for improvements.

    • Replace all the h1 with h2. There should not be more than one h1 on a page. Many h1 mean many titles which can confuse the users, especially the screen reader users.
    • Learn more — How-to: Accessible heading structure - The A11Y Project
    • Write your code with consistent styling. You use single quotes on class='icon' while the rest of the HTML uses double quotes.
    • Remove width: 100% from the body. It is already the default styling.
    • Never limit the height of the body element. Use min-height instead.
    • Remove width: 100% from the main. It is already the default styling.
    • Remove height: 100vh from the main styling at @media screen and (min-width: 64rem). Let the content inside it controls the height.

    For your information, it is possible to make the site responsive with no media queries. I recommend taking a look at my solution. I wrote the technique that I used on the README.

    Responsive 3 Column Card Component (No Media Queries) coding challenge solution

    I hope this helps. Happy coding!

    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