Submitted about 2 years ago

FEM-3-column-preview-card

Yu-An• 70

@yuany2036

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I feel like I struggle a bit with making things responsive. I have so far started off making the desktop version first, and then moving on to the mobile view, and usually have to experiment quite a bit to make everything responsive and presentable. One problem I had for example was the fact that when stacked in the mobile view, elements that are stacked at the top simple get cut off, and there is no way of scrolling up there (due to being in a negative position I presume), which I was able to fix by removing my justify-content: center. However I feel like there has to be a more standard way of making it responsive? Any suggestions on best practices in this case?

Community feedback

CharlieeLuna• 260

@CharlieeLuna23

Posted about 2 years ago

First of all, good job!

I can personally recommend to start with a "mobile first" approach. I did it that way and when moving to desktop I only needed to change a few things like the border radius and the display direction instead of column, row as everything was already centered. Just 18 extra lines of code for the media.

Hope this helps for future projects.

Marked as helpful

Yu-An• 70

@yuany2036

Posted about 2 years ago

@CharlieeLuna23 Thanks for the comment! I just finished another project using this approach, though I'm still getting used to it, so I definitely had more than 18 lines of code haha But again, thanks for the answer and I'll keep this in mind going forwards!

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