Skip to content
Submitted 9 months ago

Four card features using Vs code

@valchiz•150
@yemmighto
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • P
    Tomislav Šuto•260
    @RetroApe

    Hi Valchiz.

    I see you did a good job matching the layout. I also noticed you used border-top to mark each card with its own color. I actually didn't think of that. I used linear-gradient for that:

    background: linear-gradient(
        var(--cyan) 2%, /*this is where you change color*/
        white 2%
    );

    Shadows could use some amplification. Something like

    box-shadow: 0px 10px 30px 0px hsla(180, 62%, 55%, 0.55);

    I would advise against setting height and width on the main element. It will automatically make your layout unresponsive. Otherwise:

    • container doesn't stay in the center of the screen when you scale the window down (because it is staying in the center of the main, which went off screen)
      • other elements also behave in similar way
    • you will essentially be making your life difficult because you will have to make more @media queries than is necessary

    When I removed width and height on main, your .p-words element started behaving strangely. I saw that you centered this element by putting 450px on the left and right side of the margin. Centering elements horizontally is usually done by entering auto on both sides of the margin.

    p-words element should have a maximum width. It will still make the element responsive if the width of the screen becomes smaller than it.

    max-width: 55ch;

    I used ch, which is a unit for characters. It essentially makes your paragraph have a line no bigger than 55 characters. I think this is pretty cool.

    min-width and max-width is generally better to use on most elements because it will keep your elements respond to size reduction/expansion.

    I hope I helped a little bit and didn't make my explanations confusing :)

    Best of Luck!

    Marked as helpful
  • P
    Tomislav Šuto•260
    @RetroApe

    I am glad my feedback helped you.

    Usually, you never set height, at all. If you set a height on an element, it will most often make it unresponsive.

    You never set width on a <header>, <body>, or <footer>. It makes your site immediatelly unresponsive.

    I personally use Dev Tools on Chrome to check how my site functions, but people say Firefox is better.

    For Chrome:

    To open dev tools, just go to you site (or any other) and press shortcut: Ctrl + Shift + C. Use the same shortcut to hover over an element on your website and preview its width, height, padding, margins, or click it and you can check it's properties on the right.

    You can turn off properties or change values to see how your site behaves. You can also change width and height of the viewport to see how your site behaves.

    Try selecting <main> element end turn off height and width and see what happens.

    ...

    I mean, it is hard to explain these things with just words. Here, watch this video to learn how Dev Tools function. The video helped me, and it is not long like some other videos.

  • @valchiz•150
    @yemmighto

    I really appreciate your feedback, I really don't know how to make use of the linear gradient part yet but will try to figure it out.

    about the height and width on main element, which make it unresponsive, where can I apply the height and width to make it responsive since I divide my work in sections.

    the max width character really help a lot and also the shadow part, it really help

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