Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML, CSS, Flexbox

Rashi 165

@shangum

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Fluffy Kas 7,735

@FluffyKas

Posted

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
Discord logo

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