Skip to content
Submitted 6 months ago

Flex column switches to grid for mobile stacking

Simon•40
@BlackCroUK
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?

Matching the border-radius of the card element to the border-top gave the desired effect for the coloured line. If the border radius was different, the colours curved slightly at each edge.

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

Finding an elegant solution to positioning the outer cards in both desktop and mobile view.

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

Targeting main, header, h1 etc and their nested elements directly within CSS.

Community feedback

  • Eugen•200
    @psdesignroPosted 6 months ago

    Looks great and your code is very well structured. I had a bit another approach for those top borders, as setting border-top + radius looks a bit different than the original. But you solution looks cleaner to me, nice job!

    1
    Simon•40
    @BlackCroUKPosted 6 months ago

    Thanks, yes the border top colour was deceptively tricky to get right, fun challenge though @psdesignro

    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