Submitted 5 months ago

FEM Four Card Feature w/ CSS Grid + BEM Methodology

bem, sass/scss

moe•220

@jellmoo

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

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

First time using BEM methodology and I think I did an okay job, I also separated my scss into different files which makes my main css file look much cleaner.

What challenges did you encounter, and how did you overcome them?

I had to fight a lot with my media queries since this is my first time working from mobile view -> desktop view, especially getting my content centered in desktop view so I ended up just using a padding for that. I also used grid instead of flexbox for this project and it did prove a bit more difficult, but I think it was the right choice for this specific project.

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

Any feedback on my BEM methodology, my use of Grid and also Media Queries would be appreciated! Thank you for viewing! <3

Code

Please log in to post a comment

Community feedback

P
Leonard Cohen•210
@lenny131
Posted 5 months ago
Good job on your solution! The card grid is responsive when resizing when resizing the browser window and changing the zoom level. The only issue is that it doesn't handle changes to the browser's default font size. You might want to consider using size units relative to the font size (like rem) in the media queries instead of px.
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