Pod request responsive landing page using css grid and flexbox

Community feedback

• 

  Joran Minjon•610

  @DrKlonkPosted over 3 years ago

  Hi Zach!

  Nice job for your first challenge! Don't be misled by the word newbie for this one, it is quite tricky. The desktop version looks nice!

  Main thing: responsiveness I see some problems when I resize the screen to a mobile width, it kind of breaks. It works at 376px and lower, but everything in between is a bit wonky. If I resize the window, I get horizontal scrolling. And if I resize within devtools, at 775px for instance, the paragraph text size is too small because of the automatic resizing. On tablet sizes, the background image get pushed to the left, eventually going past the left side of hero__cta and the screen.

  I think these issues are caused by the grid that can't fit the screen.

  Random other things

  • You can add some line-height to the paragraph to gice it some space between lines.
  • There are no error messages for the email input.
  • It would also be nice if the google podcasts logo was centered vertically. Nothing a little flexbox can't fix.

  If you like, you can check out my solution for this challenge as well, it can at least help if you want to make the error messages.

  Don't be discouraged by my comments, you already took a very good step to join the community. Just trying to help!

  Keep on coding! You'll just get better and better.

  Cheers, Joran

  1

  ---

  

  wisniewskiz•55

  @wisniewskizPosted over 3 years ago

  Hey, I appreciate all the feedback! Yeah, the newbie label did throw me off a bit, but it was a great challenge to get my gears working again after taking some time of from building anything.

  I will definitely take a look at the issues as I was noticing some sizing problems. I think my main issue was just going off the dimensions given in the mockup instead of finding the breakpoints naturally and making sure all bases were covered.

  I really appreciate the constructive criticism and will for sure take a look at your solution! Thank you so much!

  And I totally forgot about doing any email validation. Time to get acquainted again with my enemy of regular expressions!

  0