Skip to content
Submitted 7 months ago

Four card feature section - CSS Grid

Donovan Romero•100
@nsvonod12
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?

Practice my CSS skills

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

I didn't remember how to arrange the cards

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

At the moment, none

Community feedback

  • Jamie Reed•120
    @jreed-11Posted 6 months ago

    Nice try with this project and i see you used made good use of grid for desktop and flex for mobile and using custom CSS properties with custom varibles. only advice i could give was is getting the correct width of the Card and title containers slightly bigger than desgin. maybe USe rem units rather than %.

    To set the oder of the flex items you can use the order property see here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items to rearrange the order of the flex items.

    Overall good effot just the width sizes needed to be a bit smaller.

    1
    Donovan Romero•100
    @nsvonod12Posted 6 months ago

    @jreed-11 Thank you very much really

    Yes, I always fail in sizes and width. When I develop it looks great, but when I see the solution I realize that my solution is bigger :c

    0
    Jamie Reed•120
    @jreed-11Posted 6 months ago

    @nsvonod12 sometimes i have done that and reliase my browser is not zoomed to 100% so could be to look out for

    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