Skip to content
Submitted over 1 year ago

Four card feature section

sass/scss, vite
Darek•140
@DarekRepos
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

i created flexible font sizes (fluid typography) and media queries. I used Flexbox and CSS Grid. Next time, I will use more JavaScript to my solution.

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

The challenge I encountered was combining grid with Flexbox to achieve the most optimal solution. I believe I chose a very flexible approach.

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

I want to learn more about Dynamic Component-Based Architecture. Is my solution with Flexbox and Grid the optimal one? There's definitely still a lot to learn in this area. If you have any suggestions for improvement or find any mistakes in my code, please let me know. I'd be very grateful for the feedback!

Code

Please log in to post a comment

Log in

Community feedback

  • Erratic Enigma•200
    @erratic-enigma

    Hello, nice job on the project!

    The card grid on the desktop viewport sizes looks good, but at smaller viewport sizes (such as around 590px), the cards reach their minimum width and cause horizontal scrolling. You could either reduce the minimum width of the cards, or increase the media query width to around 650px.

    A few other points:

    • On small viewports, the heading text needs to be center aligned.
    • I would recommend using em units for media queries; here's an article that covers why.
    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