Skip to content
Submitted 9 months ago

3-Column-Preview-Card

Jack-OC•250
@Jack-OC
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This was a good challenge to learn more about the use of CSS Grid and Flexbox to change webpage designs based on screen-size. Any suggestions to help improve the design would be greatly appreciated, Jack

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 9 months ago

    HTML:

    • As the icons are purely decorative, the alt text should be empty:alt="".

    • There should only be one <h1> on a page. Given there are 3 similar headings, I would change all of them into a <h2>.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

    • On body, add min-height: 100svh to make it (at least) as tall as the viewport. Also, add 1rem of padding, so the card container doesn't touch the edges on small screens.

    • Remove the width and height on .preview-card and .section.

    • Add a max-width in rem on the card container, so it doesn't stretch infinitely on big screens.

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Media queries must be in rem, and it is common to do mobile styling as the default.

    Marked as helpful
    0
    Jack-OC•250
    @Jack-OCPosted 9 months ago

    @Islandstone89 Thank you for the clear suggestions, I will definitely fix these issues Thanks, Jack

    1

Please log in to post a comment

Log in with GitHub

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