Skip to content
Submitted almost 2 years ago

Four-card-feature-section (Grid/Flexbox)

dagimchi•170
@dagimchi
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

The uneven rows made this one interesting. I suppose if I wanted each card to be in it's own div while sustaining the correct layout, I should add 3 more rows? Then place col-1 & 3 items accordingly in the grid using grid-column & row.

I think that's what I would do next time. That way that gives me the option of a 2x2 layout.

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted almost 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The main element should only ⚠️ be wrapping the card section since that is the main content of your page.
    • The “Reliable, efficient delivery Powered by Technology” is one single heading ⚠️ so the entire thing should be wrapped in a single h1 heading and either the top/bottom text will be wrapped with a span element
    • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use: Josh Comeau Reset Eric Meyer Reset
    • Using CSS Grid with Grid-Template-Areas will make things way easier 💯 when building the layout; it will give you full control of the layout.

    Here is an example of how it works: EXAMPLE

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🎆🎊🪅

    Marked as helpful
    1

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