Skip to content
Submitted over 2 years ago

Responsive Mobile-first Four-Card-Section using CSS Grid

Caio de Alcantara Santos•250
@caio-alcantara
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 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

  • Florian SAIZONOU•80
    @Rolfy229Posted over 2 years ago

    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 de Alcantara Santos•250
    @caio-alcantaraPosted over 2 years ago

    @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

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