Skip to content
Submitted 3 months ago

Four Card Feature Solution using CSS Flexbox and Bootstrap

Joewanaaa•80
@Joewanaaa
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?

Honestly I finished this product, with the thought of I could never or will never arrange the cards based on the outcome given. I TRIED TO FINISH THIS AS FAST AS I CAN! IT TOOK ME 2 WEEKS TO FINISH THIS (I took a day breaks in between to clear my mind because I could not understand a thing as the time goes by, so I have to refresh my mind with this one.) I will probably do the next challenges using mobile approach first as it makes it easier for me, I did approach this and my first other projects by designing large screen first that's why I had a hard time.

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

Caaaaards! I had a hard time putting the karma card below the Team builder card. I had to redo my external CSS twice to understand what's happening. Tried to look for resources but somehow I have hard time understanding using the CSS grid i.e 1/2 2/3 (not sure with this tho)etc. I did my research and decided to use display:absolute for the card-karma and adjusted the transform:transitionY.

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

As you will notice when you transition into smaller screen my card-karma's width stayed the same unlike the other. Kindly, help me with automatic adjusting it with the same width as the other cards. Please. Also, any feedback will be appreciated. TYSM!

Community feedback

  • MikDra1•6,980
    @MikDra1Posted 3 months ago

    Hi @Joewanaaa,

    Here are some things to review:

    • I see you have an overflow on the x axis which is really bad. To get rid of it the simplest solution is to add the overflow hidden to the parent container. Here is how:
    .container {
overflow-x: hidden;
}

    • You should try to make this layout with CSS grid. If you aren't super familiar with it here is a VIDEO that you can watch to get better at it.

    • I would also encourage you to use REM instead of PX. Here is a VIDEO that might help you use them in right places.

    Hope you found this comment helpful 💗

    Good job and keep going 😁😊😉

    Marked as helpful
    0
    Joewanaaa•80
    @JoewanaaaPosted 3 months ago

    @MikDra1 thank you for the feedback <3 this is very helpful, this is noted and will apply it to this challenge and the next challenges! :)))

    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