Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four-card-features-for-desktop-mobile

@Goddaybc

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@JEWebDev

Posted

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 470

@G-Gakii

Posted

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
Discord logo

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