@HYDROCODER
Posted
Hey there! Great job! You have even put media queries for the medium sizes and it works amazing! The gap may be from the fact that you used .9fr for the columns in the styles of your main tag. Just use grid-template-columns: repeat(4,1fr)
, give it a width and a max-width (for starters, try this: width: 70%; max-width:1200px
and change it around if you wish). The gap will be reduced and all the cards as a whole will not stretch for larger screen sizes. You may even vertically center the whole thing for larger screen sizes using grid or flex on the body.
Hope it helps :).
Marked as helpful