Submitted almost 3 years ago

Utilized HTML / CSS (with Flexbox and CSS variables)

Chris Rumler• 80

@crumler

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I am not confident that I went about utilizing the images properly. As I shrink and grow the browser window, the images shrink and grow with the size of the browser. I do not believe that is optimal, but I am unsure how to correct it (if it truly is not optimal).

I also have issue with how the buttons shift unevenly with each other when the browser window shrinks and grows at certain breakpoints. But, again, I'm unsure how to address that.

Community feedback

Yudi Yoshida• 350

@yudiyoshida

Posted almost 3 years ago

Hello, Chris! Congrats about your project! It looks great!

Well, I think that I can give you some tips about your issues... About the images, they are growing because you made the 'auto-container' div be displayed as flexbox. All flex items will try to have width 100%, which explains why the images keep growing.

And you can keep all buttons in the same level setting them as 'position absolute' and using the bottom property.

Maybe I said something wrong, because I'm not a expert front end developer, but I hope I helped you in some way.

Sorry about my english, I'm still learning. Keep coding!

Patrick• 14,325

@palgramming

Posted almost 3 years ago

things do not have to endlessly scale they just need to fit... it is OK to set some elements fixed dimensions

It looks like the best thing you could do since you understand this challenge more is to attempt to re-code it from scratch with a mobile first perspective. Coding these challenged multiple times is very helpful in building your problem solving skill and to get to understand what CSS properties interact with others

Chris Rumler• 80

@crumler

Posted almost 3 years ago

I've been wanting to try a project with the "Mobile First" approach. Maybe I'll go ahead and do what you suggest and use this challenge to do that.

Thanks for the advice. :)

Patrick• 14,325

@palgramming

Posted almost 3 years ago

@crumler well with mobile first to go to desktop you are normally adding CSS not trying to remove settings so it makes the transitions easier. Once you get used to the process you will find it easy to do every page this way

Best Of Luck

Please log in to post a comment

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