Skip to content
Submitted 3 months ago

Three Column Layout With Fluid Flexbox, without using media queries

Aria Rouzegar•150
@Ariarzg
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I did this layout without any media queries and it turned out to be more beautiful and easier than normal.

What specific areas of your project would you like help with?

I think the typography needs some work, if you have any idea to improve it, I would be glad to see your comment <3

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Øystein Håberg•13,260
    @Islandstone89

    Hi, nicely done!

    Some suggestions:

    HTML:

    • <main> holds all of the main content on a page. As a card container would likely not be the only component on a page, I would wrap the card content in a <div class="card-container"> inside of <main>.

    • The car icons are purely decorative, meaning they should have empty alt text: alt="".

    • "Learn More" would navigate to another page, hence, it is not a button but a link.

    CSS:

    • Since we have 3 cards with equal width, I would use Grid instead of Flexbox:
    .card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr))
}

    Kevin Powell has (as always!) a good video on how to set up Flexible Grids.

    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