Single price grid with Flexbox

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  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)! 😁

  2

  ---

  

  P

  Rene Sauerwein•55

  @rsauerweinPosted almost 4 years ago

  @ApplePieGiraffe Hey, thanks for your valuable feedback.

  • I adjusted the min-height to 100vh and it works fine now
  • Ok, so I don't worry too much about static paddings/margins for now. I was just concerned, that static values maybe isn't a good practice
  • button:hover - done

  One last question: About border-radius: Is there maybe a smarter way to solve that one? What bothers me is that I had to attach the border-radius to different sections

  For desktop I had to apply the border radius to: .container, .why-us, .monthly-subscription

  Would be nice if there is a way to attach the border-radius only to .container for example instead of attaching it to three different classes..

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @rsauerwein

  Oh, yeah! Just set a border-radius on the .container class and set overflow to hidden so that none of the boxes inside the card component are visible outside the border-radius of their parent container. That should do the trick! 😉

  1

  

  P

  Rene Sauerwein•55

  @rsauerweinPosted almost 4 years ago

  @ApplePieGiraffe Thank you so much. Now it's fine and I have also learned a lot. Looking forward for my next project :)

  See you, cheers

  0