Skip to content
Submitted 7 months ago

Four card feature section

Darek•140
@DarekRepos
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • Erratic Enigma•200
    @erratic-enigmaPosted 5 months ago

    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
    0
    Darek•140
    @DarekReposPosted 5 months ago

    Hello @erratic-enigma,

    Thank you for your helpful feedback on the project!

    I've fixed the horizontal scrolling issue and improved the Sass mixin for breakpoints, ensuring that em units are used for media queries to enhance responsiveness on small devices. I tested the layout on smaller viewports, and the heading text appears to be centered aligned as expected. However, I couldn't reproduce the issue you mentioned. Did I miss something? Could you please provide more details about the environment where you observed the issue? For instance, the browser type and version?

    Best regards, Darek

    0

Please log in to post a comment

Log in with GitHub

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