Skip to content
Submitted 6 months ago

Four card feature section

J. Júnior•130
@jjuniorbrasil
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'm proud of using CSS Grid and Flexbox at the same elements, based on the user screensize. Basic stuff, but I've got really surprised with the result.

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

Firstly, I'm not used with the rows declarations along the CSS Grid. So I wen't through some articles and it became fluidly.

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

No specific area.

Community feedback

  • Ralph•190
    @RalphPastel972Posted 6 months ago

    Hey,

    That is really good work. Reading your code, I realize that I have still a lot to learn with grid: my solution just used grid-column-start: and I need to learn your approach.

    You didn't respect the shade under the card but that is a detail.

    I feel the break down you used in your media query is too big because just under 1000 px wide, it does not look super good.

    Honestly I have not much to say. Good work.

    Marked as helpful
    0
    J. Júnior•130
    @jjuniorbrasilPosted 6 months ago

    @RalphPastel972 Thanks for your review. I think once you start using these shorthand properties (or even grid areas) you won't step back on them.

    Didn't even realize the shade. To be honest, I'm using a pretty old monitor (actually, in it's last days) and can't notice shadow/shade effects.

    Will pay attention to the next practices about media queries and these screen ranges.

    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