Skip to content
Submitted almost 2 years ago

3-column preview card component using Flexbox

Penny•160
@YeongOh
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

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?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    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
    1
    Penny•160
    @YeongOhPosted almost 2 years ago

    @vanzasetia this is very in-depth and I did not know any of them.

    I realize I did not know html and css in detail and I keep learning from feedbacks.

    I appreciate it. Thank you Vanza.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @YeongOh

    You are welcome! 👍

    0
  • Mashael•170
    @MashaelDevPosted almost 2 years ago

    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
    1
    Penny•160
    @YeongOhPosted almost 2 years ago

    @MashaelDev Why did I not think I could add padding to body as well? you just opened up my eyes haha thank you

    0
    Mashael•170
    @MashaelDevPosted almost 2 years ago

    @YeongOh You’re welcome 👍✨

    0

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