Skip to content
Submitted over 1 year ago

CSS Flexbox

Kenn-eth•40
@Kenn-eth
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

The highlight of this project is using flexbox and minimal media query to make the page responsive. I designed for desktop first because the task looked a bit complex at the beginning.

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

The biggest challenge was aligning the two middle vertical cards. It was dicey to manage because I kept them in a different container from the two cards on the side.

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

I would appreciate comments on any part of this project.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Jake Godsall•1,390
    @jakegodsall

    Hi 👋

    Great work on this project!

    It really looks great at both mobile and desktop layouts 😁

    The main issue I see is with larger viewports. I think it would make sense to talk about the width and height of the cards separately.

    Width:

    Right now you are using a vw-based flex-basis to determine the width of the columns in your flex container. This is fine for standard viewports, but with wider viewports the cards grow indefinitely, leading to lots of empty space within the card. I would recommend adding a max-width with a fixed pixel value to each of the cards to stop this behaviour.

    .card {
    flex-basis: 20vw;
    max-width: 300px;
}

    Height:

    Something similar is happening with the height becase of the vh-based value for height. Although the problem is the same, the solution is not. generally, it is best practice to not apply a fixed-value height, because it can lead to content overflow, especially when our containers have dynamic content. CSS is responsive by default and will determine the correct height for your component based on the size of the content, as well as padding, border etc, depending on the box-sizing property you use.

    I would recommend to leave the default height: auto on your cards and use a padding-bottom to add the desired whitespace below the content.

    Hope this helps! 😁

    Marked as helpful

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