@ApplePieGiraffe
Posted
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 ofheight: 100%to thebodyof your page. Just make sure to add somepadding-topto thebodyso 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
vhorvwunits), 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 theclamp()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)! 😁
@rsauerwein
Posted
@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..
@ApplePieGiraffe
Posted
@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! 😉
@rsauerwein
Posted
@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
