Design comparison
Solution retrospective
Q1: Keeping border radiuses in-sync
While I typically just eye-ball border radiuses when there is a container with one and another close element inside (in this case an image). Though I'd imagine theres some ratio that could be set in order to keep the inner radius in proportion to the out radius. Has anyone ran into a good way to factor this in? I was thinking just use a calc for the inner radius.
Q2: Extra space at the bottom of the card
I couldn't figure out what was dictating the extra padding at the end of the card in the mockups. I ended up adding a padding-block-end to make it match the style but it's unsatisfying and likely won't as nice with other lengths of content. Is there something from the design I'm missing?
Community feedback
- @Gerald-LeCourPosted over 1 year ago
Hello! 👋
I had the same question you asked in your first question, and I found out that if you set the qr image' border radius to (border-radius: inherit;) it will proportion its border-radius to its parents border-radius and to me this seems more efficient than guessing which I was doing as well.
Hope this helped! 👊
0@Kcalde20Posted over 1 year ago@Gerald-LeCour hmm,
inheritwill keep them exactly in sync, which is quite useful for keeping sudo elements styled similarly to their parent. In this example, my image needs a smaller radius than the card and i'd like to keep the ratio between them.. I think the closest i've solution i've found for this would be using a custom property for the--card-border-radius, and then use something like this for the image:border-radius: calc(var(--card-border-radius) * .8);0
Please log in to post a comment
Log in with GitHub
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