Skip to content
Submitted about 3 years ago

HTML, CSS, Flexbox

Rashi•165
@shangum
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

Hello all,

I ended up setting max-width values in the individual cards (colored sections). I didn't know if that approach was warranted or if I should have relied more on percent based sizing (this also pertains to padding as well).

Any thoughts or meditations are welcome.

Thanks

Community feedback

  • Fluffy Kas•7,715
    @FluffyKasPosted about 3 years ago

    Hiya,

    Using max-width is a great way to make something responsive. Percentages are... well, they have their use cases for sure (I think for paddings they can work well) but for setting a width on a component in % is probably not something you wanna do as it will allow the component to stretch as the screen size gets wider.

    Your solution looks good btw on desktop and mobile, I'm just not sure about the size in-between, when the 3rd card goes into a new row. I have a few more suggestions:

    1. Use relative units! I know pixels seem easy but they're not responsive.

    2. Your alt texts: I'd leave them empty here, they're decorative only. Also, you don't need to include words like image, logo, etc in alt texts as the screen reader will tell its user it's an image.

    3. Your buttons use the browser's default font-family, don't forget to change them :)

    Marked as helpful
    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