Mobile first approach using node SASS and css grid

Community feedback

• 

  LetsFrontend•500

  @B1N4R1Posted over 3 years ago

  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 .container element.

  • 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

  0

  ---

  

  Saif Narpali•590

  @SaifN97Posted over 3 years ago

  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!

  0

  

  LetsFrontend•500

  @B1N4R1Posted over 3 years ago

  @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!

  0

  

  Saif Narpali•590

  @SaifN97Posted over 3 years ago

  Looks like that's just what I needed, Thanks again @B1N4R1😀!

  0
• 

  Ahnaf Hasan Shifat•385

  @ah-nafPosted over 3 years ago

  It looks great

  0

  ---

  

  Saif Narpali•590

  @SaifN97Posted over 3 years ago

  I'm glad you liked it! @ah-naf This was my first attempt with css grid. :)

  0