Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component

@Kcalde20

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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-LeCour

Posted

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

@Kcalde20

Posted

@Gerald-LeCour hmm, inherit will 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
Discord logo

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