@B1N4R1
Posted
Hi Saif,
This is a great solution! I love the approach you took with CSS Grid, it's the same approach I took
Some suggestions:
-
In a 4k screen the cards look way to streched and it's difficult to read, that's mainly because you're setting a
font-size: 62.5%on the html selector. I would suggest you define a 12px font-size in the html element with a max-width of 1400px in the.containerelement. -
If you want to center it to the middle instead of using huge margins I would do some basic flexbox centering like this:
main{
min-height: 100vh;
display: flex;
justify-content: center;
}
Keep on the good work!
Cheers!
Marked as helpful
@SaifN97
Posted
Hey @B1N4R1! So glad you liked it too😀 I totally agree with your first suggestion. However, I'm guilty of using that huge margin too but I wanted match the design as close as possible and my laptop screen isn't big enough to match the 1440p design, I wasn't sure the height would match the actual design and that's why I chose to go with huge margin for this one😅. I hope this makes sense and you'll forgive me for the huge margins hopefully😂
Thanks for the feedback, Cheers!
@B1N4R1
Posted
@SaifN97 Don't worry you don't have to apologize for anything, we are all learning here.
If you have problems because your screen size isn't big enough, you can use chrome's DevTools to visualize your design in different screen sizes, this article from google explains in detail how to use it.
Same if you are using firefox, here an article about it.
It's a life saver, it has helped me tons of times!
Cheers!
@SaifN97
Posted
Looks like that's just what I needed, Thanks again @B1N4R1😀!
