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

Responsive Layout With Grid

Osamaβ€’ 160

@osamabeinglagging

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

@osamabeinglagging

Posted

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

0

Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

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

@osamabeinglagging

Posted

@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
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