Skip to content
Submitted about 1 month ago

My Four Card Feature Section Solution

Jocelyne Teles•180
@JocelyneTeles98
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 think I did a good job with responsiveness. I tried to find the most suitable options to solve the challenge. Also, I went a little bit more far, and create by myself a design for tablets in portrait mode with 2x2 grid which it seems to fit very well to these sizes.

The next time, I hope to have more present the idea of use relative sizes instead of fixed ones. I started using fixed sizes and I noticed that it doesn't work for all devices (even if they're inside of the same media breakpoint).

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

As I explained a little bit in the last question, the most challenging part was to find the correct sizes that work for multiple screen sizes. I used the grid-template-columns property to create the space to place the cards, and each one of them I put 100% of width to cover corresponding space.

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

As I challenged myself and I set different design for tablets and small screens, I would like to know if my solution is good. Basically, I arranged the middle cards position with a span to fix them in the middle of the grid, but I hide this span and repeat the cards div outside the span for tablets screen sizes. I don't know if it is the only way or if there is another better one. Please, let me know if you have a suggestion and I will be grateful 😉

Community feedback

  • Pickle•220
    @Augurk66Posted about 1 month ago

    Very good job on this one!

    I took another approach. You can get the same result by starting by building mobile first. You can make the mobile lay out by declaring only a grid with a gap. Next declare three columns for the grid for lager screens within the @media. And to center the left and the right cards on the bigger screens you can use the properties:

    #supervisor {
    grid-row: 1 / 3;
    align-self: center;
  }

#calculator {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    align-self: center;
  }

    This way the card will center itself between the rows. This was my source: https://gridbyexample.com/examples/example26/

    Hope this helps :)

    Keep coding!

    Marked as helpful
    0
    Jocelyne Teles•180
    @JocelyneTeles98Posted about 1 month ago

    @Augurk66 thank you very much! I will try the solution you offered and save it as example for future projects. Happy coding! 😁

    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