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 Mobile-first Four-Card-Section using CSS Grid

@caio-alcantara

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


The first time I did this challenge I used Flexbox. Now that I'm learning Grid, I decided to restart it and give it a try. The mobile part went just fine, my problem is just positioning those two cards on the side in the middle of the grid. I've tried all types of aligns/justify: center, and nothing worked. Why's that? How can I fix it? Thank you already

Community feedback

@Rolfy229

Posted

This is how I did it myself, use *for the first card (supervision), position: absolute; margin-top: 255px ; margin-right: 755px; *and for the second card, i have used the same code but instead of margin-right put margin-left, and then, depending on your css you can modify the margin

1

@caio-alcantara

Posted

@Rolfy229 Thanks a lot for the reply. I managed to fix it by myself just by using more grid rows.

1

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