Skip to content
Submitted 7 months ago

Responsive Layout With Grid

Osama•160
@osamabeinglagging
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 rushed this a lot so I'd slow down next time and start with desktop version first.

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

The main challenge was to make it accurate and I was unable to make it accurate.

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

Any help is appreciated.

Community feedback

  • Osama•160
    @osamabeinglaggingPosted 7 months ago

    Ah I keep butchering the alignment. Can someone drop some tips regarding alignments please.

    0
    Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqPosted 7 months ago

    Salaam alaikum @osamabeinglagging, the only thing that disturbing the alignment is the usage of margin-block.

    This property is applied for main element, So you can fix the vertical alignment issue by removing this rule from css.

    main {
  margin-block: 5.2rem;
}

    Hope this feedback was helpful to you!

    Happy coding Brother.

    Marked as helpful
    1
    Osama•160
    @osamabeinglaggingPosted 7 months ago

    @0xabdulkhalid Wa ʿalaykumu s-salam. I totally forgot about this. Thank you very much for pointing this out. I'll keep this in mind in the future. Thank you very much.

    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