@didyouseekyng
Posted
Hey bro, How you doing? You've done a great work attempting this challenge.
.cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
-
I think this gap of 20px is not necessary on the card as a whole, so the card1, card2 and card3 would merge.
-
I also noticed that on mobile, the cards don't have a margin which I suggest you add.
-
From what I learnt from a few mentors here on FEM, I think the
display:flex
,align-items: center
,justify-content: center
andmin-height: 100vh
does the centering trick. You can apply it to the body or the card. Just work your way around and see which one works well for your code. -
Also learnt from others too that it's not best practice to actually have more than one h1 tag in your code. I do hope you find this helpful. Cheers bro! Anticipating your feedback.