Skip to content
Submitted about 4 years ago

Pod request responsive landing page using css grid and flexbox

wisniewskiz•55
@wisniewskiz
A solution to the Pod request access landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I used parcel bundler to compile all of my sass into a distribution ready file.

I'm not sure if I went about the cleanest or easiest way to create the layout using grid and flexbox, but the end results are useable. If you see anyway that I could have wrote more concise code please let me know!

This is my first solution to submit and I am very exited to learn and grow with everybody here.

Code

Please log in to post a comment

Log in

Community feedback

  • Joran Minjon•610
    @DrKlonk

    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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord