Skip to content
Submitted 4 months ago

Four-card-features-for-desktop-mobile

OJIJEVWE PETER GODDAY•100
@Goddaybc
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 am very proud to finally be able to complete this site. i finish the html and structure the mobile like four days ago except the desktop part which game me so much pain

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

How to place the four cards in the columns and role so that they can align the the way they displayed i was unable i started learning css grid untill someone show me the code and i understood it

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

Grid is my problem haven't understand it fully but i will

Community feedback

  • Juan•480
    @JEWebDevPosted 4 months ago

    Hello @Goddaybc!

    Nice job!

    I think i can help you understand the challenge in a different way maybe easier.

    On mobile, you need a single column and on desktop you need 3 of them. To make your 4 cards into 3 columns you can:

    Wrap the Team builder and Karma cards in a div, doing this will make that you have 3 elements on your container (Supervisor card, the div with the karma and team builder cards and the calculator card). Now you only have to change the flex-direction of the container from column to row and there you have it.

    Give it a try

    Marked as helpful
    0
  • Gakii•560
    @G-GakiiPosted 4 months ago

    Well done. -Consider watching CSS Grid by Net Ninja on YouTube to gain a better knowledge of Grid.

    Marked as helpful
    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