Skip to content
Submitted over 2 years ago

3-column preview card component using Flexbox

Penny•160
@YeongOh
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

in mobile version I set body height = auto;

but what would be the better solution without setting card's height?

I did not like it as my card was taking the whole page, should I just set margin on the card?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Yeong Oh! 👋

    About your question, you only need to set min-height: 100vh on the <body>. Then, remove height: auto and height: 100vh. By setting min-height the <body> will allow to grow if needed while still make sure that it will always fill the entire browser's viewport.

    You should not change the font-size of the <html> element to any value. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.

    Some other suggestions from me.

    • Replace all the <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.
    • Dive deeper — How-to: Accessible heading structure - The A11Y Project
    • All the car icons are decorative images. So, leave the alternative text empty.
    • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
    • <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons

    For your next project, I recommend writing the CSS using the mobile-first approach (using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

    If you use the desktop-first approach, then you need to write more CSS to simplify the layout (usually into a one-column layout).

    The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

    Learn more — Responsive design ground rules | Polypane

    I hope this helps. Happy coding! 😄

    Marked as helpful
  • Mashael•170
    @MashaelDev

    but what would be the better solution without setting card's height?

    hi @YeongOh ✨ I think the better way is make body height auto in mobile version because

    "height: auto; the element will automatically adjust its height to allow its content to be displayed correctly." and add padding top and padding bottom for body .

    .

    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