Skip to content
Submitted over 4 years ago

Single price grid with Flexbox

Rene Sauerwein•55
@rsauerwein
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, this is my first finished frontend project. I'm a unexperienced newbie so far and would be very thankful for your valuable feedback.

Questions:

  • I tried to center the price grid with flexbox horizontally and vertically. For that I had to set the height to 100%. Problem: If I open the site on a small mobile device, I can't scroll. Do you have a solution for me? I tried stuff like to work with min-height, but it didn't help...

  • I wasnt sure when I should use dynamic margin/paddings and when I should use static ones. I decided to use for my layouts inside the boxes static paddings so that the result matches with the design mockup as good as possible. Is this a good practice that way or should I avoid static paddings in general?

  • Any other suggestions on what topics I should pay close attention for my upcoming projects?

Thanks :)

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Rene Sauerwein! 👋

    Good job! Your solution looks good and responds well! 👍

    And congratulations upon completing your first challenge on Frontend Mentor! 🎉

    • You should be able to fix this problem by adding min-height: 100vh; instead of height: 100% to the body of your page. Just make sure to add some padding-top to the body so that the card component is right up against the top edge of the page.
    • I don't think you need to worry about using dynamic margin/padding very much. Most designs look great with static margin/padding and you usually only need to think about changing the static margin or padding when you switch from the desktop to the mobile layout of the site or something (which you can easily do with an existing media query). But if you'd really like to use dynamic margin/padding (like by using vh or vw units), go for it! Just make sure the margin or padding doesn't become too much on very large desktop screens or too small on mobile screens (which is another reason static margins/padding work pretty great but you can use the clamp() function to keep your dynamic margin/padding from going crazy). Most solutions just use static margin/padding.
    • I suggest adding a hover state to the button and a border-radius to the bottom of the card in the mobile layout of the site.

    Keep coding (and happy coding, too)! 😁

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