Frontend Mentor | qr code component card coding challenge solution

Solution retrospective

What are you most proud of, and what would you do differently next time?

The way I set the radius of the QR image. I remember there are some methods to achieve the best radius based on the radius of the parent and the distance between the parent and child boxes.

What challenges did you encounter, and how did you overcome them?

How to use background-size in the background syntax? I couldn't figure it out.

What specific areas of your project would you like help with?

background syntax. how can I use background-size inside of background without having error.

Community feedback

Stephanie Dennehy• 220

@Stephanie-Dennehy

Posted 4 months ago

I’m curious why you made the image a background rather than inserting it into the html. I think that would fix the background issues you’re having. You could directly control the image size as an html element.

nekefer• 200

@nekefer

Posted 4 months ago

@Stephanie-Dennehy I start with that and I had a problem and I just went with background syntax. I will retry to do it that way. Thanks

Stephanie Dennehy• 220

@Stephanie-Dennehy

Posted 4 months ago

@nekefer

Here is how I laid mine out if you want some ideas. I put the image inside a container so I could adjust the size of the image within the container for more responsive design.

<div class="card"> <div class="qr__container"> <img src="/images/image-qr-code.png" alt="qr code to scan"> </div> <div class="card__text"> <h1>Improve your frontend skills by building projects</h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> </div> </div>

Marked as helpful

nekefer• 200

@nekefer

Posted 4 months ago

@Stephanie-Dennehy Ok, got it. I will implement that later.

qr code component card

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community