Skip to content
Submitted about 1 month ago

Four card feature section

Iceish96•140
@Taninwat-55
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 challenges did you encounter, and how did you overcome them?

To decide whether to apply Grid or Flex in this case. I'm quite disappointed with this project because I spent too much time on fixing the layout as well as making it responsive. This is not really responsive when I try to reduce the screen size in a web browser, but it works when I use my mobile. I mean the boxes or the cards stack on each other in a column while it doesn't work the same on a web browser.

Community feedback

  • Juan•160
    @JuanTwoFourPosted about 1 month ago

    Good solution in all I see the vision and the idea behind the design layout. One thing that could be done is instead of using the grid display is to stick with flexbox in this situation. The way I handled it was grouping the two middle cards together so they would stack on top of each other no matter the screen size. Next was to group those cards with the remaining card also using the flex box, and using media queries change the flex direction accordingly to screen size (row for large screens and column for mobile screens).

    Marked as helpful
    1

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