Responsive Grid Layout

Community feedback

• 

  Sunny•525

  @statanasovaPosted almost 4 years ago

  Hi, Peter!

  Your solution looks great, especially on large screens, and is quite responsive.

  I am a bit confused of how you used the grid :) Even though you obviously made it work, why did you need 12 columns at all?

  Here is how I see the grid on this one:

  • On small screens, all you have is 1 column with 3 rows (logo, image, content).
  • And on large screens you have 2 columns and 2 rows (1st col - 1st row for logo, 1st col - 2nd row for content, and 2nd col 1+2 row for the image).

  That is the beauty of CSS Grid - we don't need all the 12/16 columns that we had to stick to when using a framework like Bootstrap. We can build a grid with just the right amount of rows and columns. I believe this is considered the industry best practice at the moment :)

  PS. I learned a TON about how to approach CSS Grids from Jen Simmons, she is a member of CSS Working Group. Here is a link to her YouTube videos.

  Hope that helps. Keep it up!

  3
• Account deleted

  Hi Nupur nyour solution it's look great and responsive for me keep contributing these awesome solutions

  3
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey there, Peter Klink! 👋

  Nice work on this challenge! 🙌 I like that success message which you added that appears when valid input is entered into the email input! 👍

  I just suggest making sure the background in the mobile layout extends all the way to the bottom of the page so that there isn't any empty white space there! 😉

  Keep coding (and happy coding, too)! 😁

  0