Layiwola Tobi• 110
@Laytix
Posted
Good job on making it look good on the desktop, though there are issues with how it looks on any viewport smaller than 768px.
Looking at your code putting the titleCard div in the same div as your grid just increases your headache. Put it outside so that all that you're dealing with would just be the card1-4.
For the grid, you went with a 6(col) by 3(row). I would advise 3(col) * 4(row) instead, would make it easier to place supervisor and calculator in the middle, and learn about grid-areas. Trust me grid-areas would make your life way easier.
In viewports less than 375 just plug this
@media screen and (max-width: 376px) {
main{
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 1fr);
}
}
Youre doing fine mate, just need to responsive.
Marked as helpful
1
