Skip to content
Submitted 3 months ago

Four card feature section

Mr iD•100
@iD024
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?

I am proud of how i tackle the problem of the layout of the cards I used flex this time next i would like do the same using grid

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

To the desire layout i first used grid but didn't work out well... next used flex where i applied flex on to the container and then divided the columns then adjusted each column to get the layout

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

I need help with the code... its just bad i know it 💀😭😭 if someone made my 10 lines of code into 3 i won't be surprise

also need help with the responsive with smaller screen sizes please use GitHub if you can to push newer code

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Erwin•190
    @erwindrd2

    Hi, When looking at your code, I suggest you study HTML structures. For example, you are not using an H1 and are not using span the way it is supposed to be used. With a good HTML structure, writing CSS would be easier. Some info about HTML structure can be found here.

    Regarding the CSS, I am not sure why you are setting a font-family (Poppins) in your CSS reset. That font is not used in the design, so it shouldn't be in your code.

    I'm also not sure why you set your body to display:flex? You can center items with margins without the need for flex.

    You might consider using media queries to make the site responsive. More about media queries here.

    I like your use of the clamp function for font-sizes. You might consider using them for spacing as well. Since you are using px to define the width and height for the cards, they will not be responsive. The same for images. More information on responsive design can be found here.

    Keep trying and pushing forward, and you will improve fast, keep up the good work!

    Marked as helpful
  • P
    Andrey•4,600
    @dar-ju

    Hi Mr iD!

    It's too early to panic! )

    Your work is almost ready, you just need to fix it a little.

    Look, firstly, the .cards class doesn't need such big indents on the sides, you already have padding there, remove margin-left and margin-right

    Next, you can make one .card class that will have common parameters for all cards and .card1, .card2 ... - are different, their border-top is different. This is how the card will look - <div class="card card1">

    Right now your cards have a fixed size of 400px, so they don't shrink, for .card change width: 400px; to max-width: 400px;

    Remove wrap, it can be added to the tablet version. For .cards, remove flex-wrap: wrap;

    Well, that's it, the desktop version is ready and looks great.

    Next, see how you can change class properties depending on the screen resolution https://www.w3schools.com/cssref/atrule_media.php

    If anything, ask, I'll help.

    Marked as helpful
  • Mr iD•100
    @iD024

    what the hell that screenshot messed up preview site works well well i know why 💀😭😭😭

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